Flutter #03 各种形状布局清单
2020-11-13 本文已影响0人
喜欢书的女孩
image
目录：
- 正方形
- 圆形
- 椭圆
- 三角形
- 五角星
- 总结
1. 正方形
（1）普通正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(color: Colors.pinkAccent),
),
),
);
}
image
（2）立体正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 立体正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
boxShadow: const [
BoxShadow(blurRadius: 10),
],
),
),
),
);
}
image
（3） 线性渐变正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 线性渐变正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: const [
Colors.red,
Colors.blue,
],
),
),
),
),
);
}
image
（4）渲染正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 渲染正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: const [Colors.yellow, Colors.blue],
stops: const [0.4, 1.0],
),
),
),
),
);
}
image
（5）五彩正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 五彩正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: SweepGradient(
colors: const [
Colors.blue,
Colors.green,
Colors.yellow,
Colors.red,
Colors.blue,
],
stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
),
),
),
),
);
}
image
（6）图片阴影正方形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape:图片背景正方形')),
body: Center(
child: Container(
height: 200,
width: 200,
foregroundDecoration: BoxDecoration(
backgroundBlendMode: BlendMode.exclusion,
gradient: LinearGradient(
colors: const [
Colors.red,
Colors.blue,
],
),
),
child: Image.network(
'https://flutter.io/images/catalog-widget-placeholder.png',
),
),
),
);
}
image
2. 圆形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 圆形')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.purpleAccent,
shape: BoxShape.circle,
),
),
),
);
}
image
3. 椭圆
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 椭圆')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.yellowAccent, width: 2),
borderRadius: BorderRadius.all(Radius.circular(18)),
),
),
),
);
}
image
4. 三角形
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 三角形')),
body: Center(
child: Container(
height: 400,
width: 400,
transform: Matrix4.rotationZ(pi /4),
decoration: BoxDecoration(color: Colors.green),
),
),
);
}
image
5. 五角星
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('shape: 五角星')),
body:Row /*or Column*/(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star, size: 50),
Icon(Icons.star, size: 50),
Icon(Icons.star_half, size: 50),
],
),
);
}
image
6. 总结
文章是 Android 面向需求开发系列中的一文，更多相关文章请关注。如若有什么问题，也可以通过扫描二维码发消息给我。转载请注明出处，谢谢！
image
