vue.js样式布局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: ...,

)

对应关系

属性css(box-shadow)flutter(boxShadow)
offset前两个值offset: Offset(0, 0.5)
blurRadius第三个值blurRadius: 5,
spreadRadius第四个值spreadRadius: 0
colorrgba(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,)

],

),

)

);

以上就是vue.js样式布局Flutter业务开发常用技巧的详细内容,更多关于Flutter业务开发样式布局技巧的资料请关注其它相关文章!

以上是 vue.js样式布局Flutter业务开发常用技巧 的全部内容, 来源链接: www.h5w3.com/240190.html

回到顶部