阴影样式中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
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如下图
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: [
buildButtonRadio(context),
buildCondition(context),
SizedBox(height: 100,)
],
),
)
);