Flutter业务开发常用技巧（样式布局篇）

shadow样式flutter与css对应关系如下图shadowUIwidth:75px给出的css样式；高度：75px；背景色：rgba(255,255,255,1);边界半径：4px；盒子阴影：0px0.5px5px0pxrgba(0,0,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),//阴影布局装饰：BoxDecoration（颜色：WBColors.white，borderRadius：BorderRadius.circular（8），boxShadow：[BoxShadow（颜色：Color.fromRGBO（0,0,0,0.08），偏移：Offset（0,0.5），blurRadius：5，spreadRadius:0)]),alignment:Alignment.center,child:...,)对应属性css(box-shadow)flutter(boxShadow)offset前两个值offset:Offset(0,0.5)blurRadius第三个值blurRadius：5、spreadRadius第四个值spreadRadius:0colorrgba(0,0,0,0.08)color:Color.fromRGBO(0,0,0,0.08)文本框的边框处理如下UIUI给出的css样式为如下底部宽度：335px；高度：138px；border:0.5pxsolidrgba(230,230,230,1);边界半径：10px；flutter处理如下TextField(keyboardType:TextInputType.multiline,controller:textareaController,maxLines:7,maxLength:200,decoration:InputDecoration(//H5中的占位符占位hintText:'点击输入客户姓名...',//文本内边框之间的距离contentPadding:14.0,//未选中时的颜色enableBorder:OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),borderSide:BorderSide(color:Color(0xFFEAEAEA),width:0.5),),//选中时外边框的颜色focusedBorder:OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),borderSide:BorderSide(color:Color(0xFFEAEAEA),width:0.5),),hintStyle:TextStyle(fontSize:14,fontFamily:'PingFangSC-Medium',color:Color(0xFFCCCCCC),),counterText:'',),onChanged:(event){///监听输入框，返回输入框的值model.callback(event);},)这种一行css就能搞定的代码Flutter需要复杂的样式处理，有时容易出错。Flutter默认系统颜色为蓝色边框，没有找到合适的API很难修改边框颜色。渐变按钮布局UI如下图所示。给定的css样式宽度：335px；高度：46px；背景：线性梯度(98deg,rgba(242,82,40,1)0%,rgba(242,82,40,1))14.000000000000002%,rgba(252,175,60,1)94%,rgba(252,175,60,1)100%);边界半径：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属性设置背景渐变。去除Android滚动组件的下拉水波纹效果，如上图所示。如果有的业务在页面中间使用了SingleChildScrollView滚动组件，下拉就会出现上面的水波纹。在我看来，非常丑陋，影响页面的观感，那又如何呢？去除的具体操作如下：import'package:flutter/material.dart';///自定义一个NoShadowScrollBehavior去除Android的水波纹效果,AxisDirectionaxisDirection){switch(getPlatform(context)){caseTargetPlatform.iOS:caseTargetPlatform.macOS:returnchild;caseTargetPlatform.android:caseTargetPlatform.fuchsia:caseTargetPlatform.linux:caseTargetPlatform.windows:returnGlowingOverscrollIndicator(child:child,//头部不显示水波纹showLeading:false,//不显示水波纹在尾部showTrailing:false,axisDirection:axisDirection,color:Theme.of(context).accentColor,);}返回空值；}}//调用ScrollConfiguration(如下行为：NoShadowScrollBehavior(),child:SingleChildScrollView(//physics:NeverScrollableScrollPhysics(),child:Column(children:[buildButtonRadio(context),buildCondition(context),SizedBox(height:100,)],),));