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默認(rèn)都是系統(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(
'我已確認(rèn)車況 立即取車',
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ā)常用技巧的詳細(xì)內(nèi)容,更多關(guān)于Flutter業(yè)務(wù)開發(fā)樣式布局技巧的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue.Draggable使用文檔超詳細(xì)總結(jié)
Vue拖拽組件(Draggable)是一個允許與View-Model同步進行拖放排序的Vue組件,下面這篇文章主要給大家介紹了關(guān)于Vue.Draggable使用文檔的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)
Promise就是一個給一步操作提供的容器,在這個容器里,有兩個階段無法改變的階段,這兩個階段在文中給大家提到。對vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù) 的相關(guān)知識感興趣的朋友,跟隨小編一起看看吧2019-06-06
Vue Router 實現(xiàn)動態(tài)路由和常見問題及解決方法
動態(tài)路由不同于常見的靜態(tài)路由,可以根據(jù)不同的「因素」而改變站點路由列表。這篇文章主要介紹了Vue Router 實現(xiàn)動態(tài)路由和常見問題解決方案,需要的朋友可以參考下2020-03-03
在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動態(tài)數(shù)據(jù)渲染操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

