vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧

更新時間：2021年11月25日 10:11:49 作者：廈門在乎科技

這篇文章主要為大家介紹了vue.js樣式布局Flutter業(yè)務(wù)開發(fā)中的常用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪

陰影樣式中flutter和css對應(yīng)關(guān)系

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: ...,
    )

對應(yīng)關(guān)系

屬性	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內(nèi)的placeholder占位符
      hintText: '點擊輸入客戶姓名...',
      //文字內(nèi)邊框距離
      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) {
    ///監(jiān)聽輸入框 回傳輸入框的值
    model.callback(event);
  } ,
)

這種往往css一行就能搞定的代碼 Flutter需要復(fù)雜的樣式處理有時候很容易出錯。Flutter默認都是系統(tǒng)顏色藍色的邊框，不找對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: (){
        ///點擊按鈕關(guān)閉彈窗
        callback();
      },
      child: Text(
        '我已確認車況  立即取車',
        style: TextStyle(
            color: Color(0xFFFFFFFF),
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 15,
            fontWeight: FontWeight.w700
        ),
      )
  ),
)

在H5里面一行樣式代碼搞定，但是在Flutter里面需要借助Container容器組件的decoration屬性設(shè)置背景漸變。

去除Android滾動組件下拉水波紋效果

我們?nèi)绻行I(yè)務(wù)在頁面中間使用了SingleChildScrollView滾動組件，在下拉是會出現(xiàn)如上的水波紋，在我本人看來是很丑陋的影響頁面觀感，那么怎么去除呢具體操作如下：

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;
  }
}
//如下調(diào)用
ScrollConfiguration(
    behavior: NoShadowScrollBehavior(),
    child: SingleChildScrollView(
      // physics: NeverScrollableScrollPhysics(),
      child: Column(
        children: <Widget>[
          buildButtonRadio(context),
          buildCondition(context),
          SizedBox(height: 100,)
        ],
      ),
    )
);

以上就是vue.js樣式布局Flutter業(yè)務(wù)開發(fā)常用技巧的詳細內(nèi)容，更多關(guān)于Flutter業(yè)務(wù)開發(fā)樣式布局技巧的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: