個人中心
退出
Flutter之Decoration
1、不廢話，先爆照看效果
2、Decoration介紹
Flutter的Decoration可以設(shè)置：背景色 背景圖 邊框 圓角 陰影 漸變色 的等屬性，有點像android里面的shape，Decoration 是基類，它的子類有下面這些
BoxDecoration:實現(xiàn)邊框、圓角、陰影、形狀、漸變、背景圖像
ShapeDecoration:實現(xiàn)四邊分別指定顏色和寬度、底部線、矩形邊色、圓形邊色、體育場（豎向橢圓）、 角形（八邊角）邊色
FlutterLogoDecoration:Flutter圖片
UnderlineTabindicator:下劃線
這里先介紹常用的 BoxDecoration，構(gòu)造方法
const BoxDecoration({
this.color,//背景色
this.image,//圖片
this.border,//描邊
this.borderRadius,//圓角大小
this.boxShadow,//陰影
this.gradient,//漸變色
this.backgroundBlendMode,//圖像混合模式
this.shape = BoxShape.rectangle,//形狀,BoxShape.circle和borderRadius不能同時使用
})
boxShadow 陰影
color - 陰影顏色
offset - 陰影相偏移量
blurRadius - 高斯模糊數(shù)值
spreadRadius - 陰影膨脹量，這個值我是真不知有啥用，沒場景啊，一般不寫這個值
gradient漸變
支持2種漸變：LinearGradient線性漸變 和 RadialGradient掃描漸變
LinearGradient ：
begin - 漸變開始的位置
end - 漸變結(jié)束的位置
colors - 漸變顏色,是數(shù)組
stops - 值列表，裝有0.0到1.0的數(shù)值
tileMode - 平鋪模式
shape形狀
rectangle是矩形，BoxShape.circle是圓形，BoxShape.circle和borderRadius不能一起使用
3、代碼測試
效果1測試代碼
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('hello flutter'),
),
body: Center(
child: DecoratedBox(
// padding: EdgeInsets.all(16),
// padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
// padding: EdgeInsets.only(left: 10, right: 30),
decoration: BoxDecoration(
// 背景色
color: Colors.lightBlueAccent,
// 邊框，
border: Border.all(color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
// 背景圖
image: new DecorationImage(
image: new NetworkImage(
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'),
fit: BoxFit.cover
),
borderRadius: BorderRadius.all(Radius.circular(30)),
boxShadow:[
BoxShadow(
color: Colors.redAccent,
offset: Offset(20, 20),
blurRadius: 10,
),
]
),
child: Container(
height: 200,
width: 200,
),
),
),
),
);
}
}
效果2測試代碼
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('hello flutter'),
),
body: Center(
child: DecoratedBox(
// padding: EdgeInsets.all(16),
// padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
// padding: EdgeInsets.only(left: 10, right: 30),
decoration: BoxDecoration(
// 背景色
gradient: LinearGradient(colors:[Colors.blue, Colors.green]), //背景漸變
color: Colors.lightBlueAccent,
// 背景圖
borderRadius: BorderRadius.all(Radius.circular(3)),
boxShadow: [ //陰影
BoxShadow(
color:Colors.black54,
offset: Offset(2.0,2.0),
blurRadius: 4.0
)
]
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
child: Text("chenyu", style: TextStyle(color: Colors.white),
),
)
),
),
),
);
}
}
效果3測試代碼
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'open url',
home: Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text('hello flutter'),
),
body: Center(
child: DecoratedBox(
// padding: EdgeInsets.all(16),
// padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
// padding: EdgeInsets.only(left: 10, right: 30),
decoration: BoxDecoration(
// 背景色
border: Border.all(
color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
// 背景圖
image: new DecorationImage(
image: new NetworkImage(
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1484037605,2864708693&fm=11&gp=0.jpg'),
fit: BoxFit.cover
),
shape: BoxShape.circle,
),
child: Container(
width: 200,
height: 200,
),
),
),
),
);
}
}
作者：chen.yu
深信服三年半工作經(jīng)驗，目前就職游戲廠商，希望能和大家交流和學習,
微信公眾號：編程入門到禿頭 或掃描下面二維碼
零基礎(chǔ)入門進階人工智能(鏈接)
分類導航