关于前端: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: ...,
    )

对应关系

文本框边框解决

如下 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: <Widget>[buildButtonRadio(context),
          buildCondition(context),
          SizedBox(height: 100,)
        ],
      ),
    )
);