Flutter为控件添加圆角效果

iOS风格的CupertinoButton控件

参考:https://docs.flutter.io/flutter/cupertino/CupertinoButton-class.html

控件外层嵌套Material控件

控件外层嵌套一层Material,并设置:clipBehavior: Clip.antiAlias

参考:https://github.com/flutter/flutter/issues/21926

使用装饰器BoxDecoration控件

使用BoxDecoration设置borderRadius实现,另正圆除了CircleAvatar实现,也可以使用BoxDecoration设置shape: BoxShape.circle实现

使用裁剪图片ClipOval控件

ClipOval支持裁剪为椭圆及正圆

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RoundCornerDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _RoundCornerDemoPagePageState();
}

class _RoundCornerDemoPagePageState extends State<RoundCornerDemoPage> {
@override
void initState() {
super.initState();
}

Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text('RoundCorner Demo'),
),
body: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildIOSCupertinoButton(),
SizedBox(height: 10,),
new Container(
height: 40.0,
child: RoundCornerWidgetBuilder.buildRoundCornerButtonWithMaterial(),
),
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildRoundCornerImageWithMaterial(),
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildRoundCornerImageWithDecoration(),
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildRoundImageWithDecoration(),
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildRoundImageWithClip(),
SizedBox(height: 10,),
RoundCornerWidgetBuilder.buildOvalImageWithClip(),
SizedBox(height: 10,),
],
),
],
),
),
);
}
}

class RoundCornerWidgetBuilder {
static Widget buildIOSCupertinoButton() {
return new CupertinoButton(
child: Text('AppBlog.CN', style: new TextStyle(color: Colors.white)),
color: Colors.blue,
disabledColor: Colors.blueGrey,
pressedOpacity: 0.8,
onPressed: () {
print('CupertinoButton');
},
);
}

static Widget buildRoundCornerButtonWithMaterial() {
//控件外层嵌套一层Material
return new Material(
// child: new RaisedButton(
// onPressed: () {},
// //color: Colors.red[300],
// child: new Text(
// "RaisedButton",
// style: new TextStyle(color: Colors.white),
// ),
// ),
child: new MaterialButton(
onPressed: () {},
minWidth: 160.0,
//color: Colors.blue,
child: Text('AppBlog.CN', style: new TextStyle(color: Colors.white)),
padding: const EdgeInsets.all(0),
),
borderRadius: BorderRadius.circular(10.0),
//shadowColor: Colors.grey,
//elevation: 5.0,
color: Colors.blue,
clipBehavior: Clip.antiAlias, //https://github.com/flutter/flutter/issues/21926
);
}

static Widget buildRoundCornerImageWithMaterial() {
return new Material(
child: new Image(
image: new NetworkImage(//从网络加载图片并缓存在内存中
'http://www.yezhou.me/images/flutter/tang.jpg'),
width: 200.0,
height: 150.0,
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(10.0),
clipBehavior: Clip.antiAlias,
);
}

static Widget buildRoundCornerImageWithDecoration() {
return new Container(
width: 200.0,
height: 150.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/lion.jpg"),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
);
}

static Widget buildRoundImageWithDecoration() {
return Container(
width: 150.0,
height: 150.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'images/girl.jpg',
),
//从Assets加载图片
fit: BoxFit.cover,
),
shape: BoxShape.circle,
),
);
}

static Widget buildRoundImageWithClip() {
return ClipOval(
child: SizedBox(
width: 150.0,
height: 150.0,
child: Image(
image: AssetImage(
'images/hangzhou.jpg',
),
fit: BoxFit.cover,
),
),
);
}

static Widget buildOvalImageWithClip() {
return ClipOval(
child: SizedBox(
width: 320.0,
height: 150.0,
child: Image(
image: AssetImage(
'images/husky.jpg',
),
fit: BoxFit.cover,
),
),
);
}
}

Flutter RoundCorner

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :