Flutter业务开发常用小技巧（样式布局篇）_厦门在乎科技

irpas 02-07 7073

阴影样式中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: 0colorrgba(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 { @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.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小游戏开发