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

阴影样式中flutter和css对应关系

UI给出的css样式

width: 75px;
height: 75px;
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
box-shadow: 0px 0.5px 5px 0px rgba(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),//阴影布局decoration: BoxDecoration(color: WBColors.white,borderRadius: BorderRadius.circular(8),boxShadow: [BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.08),offset: 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: 0
color	rgba(0, 0, 0, 0.08)	color: Color.fromRGBO(0, 0, 0, 0.08)

文本框边框处理

UI给定的css样式如下

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

flutter处理如下

TextField(keyboardType: TextInputType.multiline,controller: textareaController,maxLines: 7,maxLength: 200,decoration: InputDecoration(//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),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样式

width: 335px;
height: 46px;
background: linear-gradient(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%);
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属性设置背景渐变。

去除Android滚动组件下拉水波纹效果

我们如果有些业务在页面中间使用了SingleChildScrollView滚动组件，在下拉是会出现如上的水波纹，在我本人看来是很丑陋的影响页面观感，那么怎么去除呢具体操作如下：

import 'package:flutter/material.dart';
///自定义一个 NoShadowScrollBehavior 去除Android的水波纹效果
class NoShadowScrollBehavior extends ScrollBehavior {@overrideWidget 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.linux: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,)],),)
);

如果你想开发小程序或者了解更多小程序的内容，可以通过专业开发公司，来帮助你实现开发需求：厦门在乎科技-专注厦门小程序开发公司、APP开发、网站开发、H5小游戏开发

Flutter业务开发常用小技巧（样式布局篇）相关推荐

ORACLE EBS FORM 二次开发常用小技巧
1.锁住当前行 Set_Item_Instance_Property('main.import_flag', CURRENT_RECORD, UPDATE_ALLOWED, PROPERTY_OFF) ...
网页代码常用小技巧！(2)
网页代码常用小技巧!(2) [转] 41.变换网页的鼠标光标〈BODY style=CURSOR: url(http://203.73.125.205/~liangmi2/farmfrog01.cu ...
html做网页窗口最小化后,40种网页常用小技巧
下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助. 1. οncοntextmenu="window.event.returnValue=false" ...
[转]40种网页常用小技巧
40种网页常用小技巧下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助.~ujL#:X( |3TRC4o Hs Xx 1. οncοntextmenu=&quo ...
[转]40种网页常用小技巧----Ajax中国
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
55种网页常用小技巧(javascript) （转）
55种网页常用小技巧(javascript) 1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...
55种网页常用小技巧(转载)
55种网页常用小技巧乖的无聊发表于 2005-4-18 13:18:09 1. οncοntextmenu="window.event.returnValue=false" ...
python常用小技巧（四）——批量图片改名
python常用小技巧(四)--批量图片改名前言:在日常使用中我们需要批量修改图片名字,使用Python的话就可以很快地完成这个目标一.材料准备 - os 二.程序编写 # -*- coding: ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
5个Excel常用小技巧，分分钟提升工作效率
点赞再看,养成习惯:十年之计,莫如树木. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含Ex ...