Flutter 给控件加圆角 (类似 Android 中的 s
2018-11-14 本文已影响12人
yanftch
UI 设计中经常出现圆角的 Button 或者带有背景色的圆角控件(TextView、Button 等等)，在 Android 中我们可以直接用 shape 来实现各种各样的圆角矩形的控件 UI，但是在 Flutter 中要怎么实现呢？下边是我总结的几种方式。作为笔记记录一下，防止后续在遇到此类问题。
(使用的Flutter 版本是 0.9.4)
image.png
一、FlatButton
类似于安卓原生的 Button，但是缺点是需要通过给他套一个容器来处理 圆角的问题。
new Container(
margin: EdgeInsets.only(top: 20.0),
child: FlatButton(onPressed: null,child: Text("FlatButton.",style: TextStyle(color: Colors.white),),),
decoration: new BoxDecoration(
color: Colors.blueAccent,
borderRadius: new BorderRadius.all(
const Radius.circular(8.0),
),
),
padding: new EdgeInsets.all(8.0),
),
image.png
二、通过 Material 给 Text 添加
设置的时候因为 Text 不能给自己设置内边距，故在他的上边又嵌套一个 Container 来处理,详细看注释
代码如下：
new Material(
color: Colors.blueAccent,//设置控件的背景色
child: Padding(
padding: EdgeInsets.all(6.0),//只是为了给 Text 加一个内边距，好看点~
child: Text(
"click",
style: TextStyle(color: Colors.white, fontSize: 60.0),
),
),
borderRadius: BorderRadius.circular(10.0),//设置矩形的圆角弧度，具体根据 UI 标注为准
shadowColor: Colors.grey,//可以设置 阴影的颜色
elevation: 5.0,//安卓中的井深(大概就是阴影颜色的深度吧╮(╯▽╰)╭)
)
当然了，如果打算给你的这个控件添加点击事件，可以用系统提供的 GestureDetector 来处理，具体请参考：https://docs.flutter.io/flutter/widgets/GestureDetector-class.html
image.png
三、通过装饰器给 Image 添加
同时可以处理成圆形的图片
Container(
width: 300.0,
height: 150.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("values/mipmap/lake.jpg"),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
)
image.png
new Container(
margin: EdgeInsets.only(top: 20.0),
child: new Text(
“Text Info",
),
decoration: new BoxDecoration(
color: Colors.red[400],
borderRadius: new BorderRadius.all(
const Radius.circular(8.0),
),
),
padding: new EdgeInsets.all(16.0),
),
image.png
四、Button —RaisedButton
RaisedButton 自己有一个默认的背景色，还没找到怎么处理掉。。。希望有知道的大神告知一下~~~~
