陰影樣式中flutter和對應關係

UI給出的css樣式

width: 75px;
height: 75px;
background-color: rgba(255,255,1);
border-radius: 4px;
box-shadow: 0px 0.5px 5px 0px rgba(0,0.08);

flutter樣式佈局

Container(
      constraints: BoxConstraints.tightFor(width: 75,height: 75),margin: EdgeInsets.only(left: 0.5,right: 0.5,top: 0.5,bottom: 3),//陰影佈局
      decoration: BoxDecoration(
        color: WBColors.white,borderRadius: BorderRadius.circular(8),boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0,0.08),offset: Offset(0,0.5),blurRadius: 5,spreadRadius: 0
          )
        ]
      ),alignment: Alignment.center,child: ...,)

對應關係

文字框邊框處理

UI給定的css樣式如下

width: 335px;
height: 138px;
border: 0.5px solid rgba(230,230,1);
border-radius: 10px;

flutter處理如下

TextField(
  keyboardType: TextInputType.multiline,controller: textareaController,maxLines: 7,maxLength: 200,decoration: InpukuYENctDecoration(
      //H5內的placeholder佔位符
      hintText: '點選輸入客戶姓名...',//文字內邊框距離
      contentPadding: 14.0,//未選中時候的顏色
      enabledBorder: OutlineInputBorder( 
        borderRadius: BorderRadius.circular(5.0),borderSide: BorderSide(color: Color(0xFFEAEAEA),width: 0.5),),//選中時外邊框顏色
      focusedBorder: OutlineInputBorder( 
        borderRadius: BorderRadius.circular(5.0),hintStyle: TextStyle(
        fontSize: 14,fontFamily: 'PingFangSC-Medium',color: Color(0xFFCCCCCC),counterText: '',onChanged: (event) {
    ///監聽輸入框 回傳輸入框的值
    model.callback(event);
  },)

這種往往css一行就能搞定的程式碼 Flutter需要複雜的樣式處理 有時候很容易出錯。Flutter預設都是系統顏色藍色的邊框，不找對API的話很難修改過來邊框顏色。

漸變按鈕佈局

UI給定的css樣式

width: 335px;
height: 46px;
background: linear-gradient(98deg,rgba(242,82,40,1) 0%,1) 14.000000000000002%,rgba(252,175,60,1) 94%,1) 100%);
border-radius: 23px;

flutter佈局樣式

Container(
  height: 46,width: UIScreen.screenWidth()-30,decoration: BoxDecoration(
    gradient: LinearGradient(colors: [
      Color(0xFFF25228),Color(0xFFFCAF3C),],begin: FractionalOffset(0,1),end: FractionalOffset(1,0)),borderRadius: BorderRadius.circular(23),child: FlatButton(
      onPressed: (){
        ///點選按鈕關閉彈窗
        callback();
      },child: Text(
        '我已確認車況  立即取車',style: TextStyle(
            color: Color(0xFFFFFFFF),fontFamily: 'PingFangSC-Semibold',fontSize: 15,fontWeight: FontWeight.w700
        ),)
  ),)

在H5裡面一行樣式程式碼搞定，但是在Flutter裡面需要藉助Container容器元件的decoration屬性設定背景漸變。

去除滾動元件下拉水波紋效果

我們如果有些業務在頁面中間使用了SingleChildScrollView滾動元件，在下拉是會出現如上的水波紋，在我本人看來是很醜陋的影響頁面觀感，那麼怎麼去除呢 具體操作如下：

import 'package:flutter/material.dart';
///自定義一個 NoShadowScrollBehavior 去除Android的水波紋效果
class NoShadowScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(BuildContext context,Widget child,AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.:
      case TargetPlatform.windows:
        return GlowingOverscrollIndicator(
          child: child,//不顯示頭部水波紋
          showLeading: false,//不顯示尾部水波紋
          showTrailing: false,axisDirection: axisDirection,color: Theme.of(context).accentColor,);
    }
    return null;
  }
}
//如下呼叫
ScrollConfiguration(
    behavior: NoShadowScrollBehavior(),child: SingleChildScrollView(
      // physics: NeverScrollableScrollPhysics(),child: Column(
        children: <Widget>[
          buildButtonRadio(context),buildCondition(context),SizedBox(height: 100,)
        ],)
);

以上就是.樣式佈局Flutter業務開發常用技巧的詳細內容，更多關於Flutter業務開發樣式佈局技巧的資料請關注我們其它相關文章！