Flutter 专题12 图解圆形与权重/比例小尝试 #yyds干货盘点#
Posted 阿策小和尚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter 专题12 图解圆形与权重/比例小尝试 #yyds干货盘点#相关的知识,希望对你有一定的参考价值。
小菜今天搭建了一个很丑的【签到】小页面,页面很简单,只有寥寥几个控件,但小菜想通过这个简单的小页面学习一下权重/比例的使用方式,顺便也学习了一下如何绘制圆形效果。
绘制圆形
小菜为了页面稍微美观一点,准备用圆形来替换普通的按钮,小菜发现 Flutter 提供了很多便捷的绘制圆形的方式,比 android 要方便很多。小菜测试时用到了如下两种:
ClipOval
ClipOval 是一个很强大的裁剪子控件为椭圆或圆角的控件;子控件没有特殊限制。同时衍生出其他几种裁剪方式:
- CustomClipper:可以创建自定义裁剪方式;
- ClipRect:可以裁剪不同宽高比例,通过 heightFactor 属性来处理;
- ClipRRect:可以设置圆角矩形或圆形;
- ClipPath:可以为任意形状的裁剪方式;
new ClipOval( child: new SizedBox( width: 100.0, height: 100.0, // 子控件为网络图片 child: new Image.network( "https://...pic.jpg", fit: BoxFit.fill, ), // 子控件为 Container // child: new Container( color: Colors.redAccent, ), ), ), // 圆角矩形 new ClipRRect( borderRadius: const BorderRadius.all(const Radius.circular(30.0)), child: new Container( width: 90.0, height: 90.0, color: Colors.red, ), ),), // heightFactor 为高/宽比例 new ClipRect( child: new Align( alignment: Alignment.topCenter, heightFactor: 1.0, child: new Container(color: Colors.yellow,height:90.0,width: 90.0,), ), )
CircleAvatar
小菜以为 CircleAvatar 是绘制正圆最方便的方式,Flutter 直接提供的绘制圆形的控件,可添加背景色及背景图;且在加载网络图片时,网络状态不佳或图片有问题时只显示背景色,更人性化。
// 只有背景色 new CircleAvatar( backgroundColor: Colors.greenAccent, radius: 90.0, ), // 添加背景图 new Align( alignment: Alignment.center, child: new CircleAvatar( backgroundImage: new NetworkImage("https://...pic.jpg"), backgroundColor: Colors.greenAccent, radius: 90.0, ), ),
权重/比例
小菜在 Android 开发过程中为了适配不同机型,常用到权重 android:weight,这样在均分布局时起到重要作用;小菜尚在 Flutter 中没有直接发现 weight 的身影,Flutter 常用 Row 和 Column 来设置横向和纵向布局。小菜发现可以通过如下方式来处理权重/比例。
Flexible
Flexible 默认也是让子控件占满填充整个父类布局,Flexible 中的 flex 属性可以调整,若两个 Flexible 控件 A/B,A 中 flex 设为 2,B 中 flex 设为 1,则整个布局中 A:B=2:1 整体占满整个布局。
new Row(
children: <Widget>[
new Flexible(
child: new Container(
color: Colors.redAccent,
height: 40.0,
),
flex: 1,
),
new Flexible(
child: new Container(
color: Colors.blueAccent,
height: 40.0,
),
flex: 2,
),
],
),
Expanded
Expanded 默认让子控件占满填充整个父类布局,Expanded 中的 flex 属性为1,而 Expanded 继承的是 Flexible;Flexible 支持的分割布局权重的方式 Expanded 也一样,而与 Flexible 不同的是默认会将子控件充满布局。
new Row(
children: <Widget>[
new Expanded(
child: new Container(
color: Colors.redAccent,
height: 40.0,
),
flex: 2,
),
new Expanded(
child: new Container(
color: Colors.blueAccent,
height: 40.0,
),
flex: 1,
),
],
),
无论时 Expanded 还是 Flexible 小菜都建议依靠 Row 和 Column 共同使用。小菜测试,两者一起使用也不会太大影响。
主要源码
class ItemSignPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
child: new Column(
children: <Widget>[
new Container(
height: 10.0,
),
new Flexible(
child: new Container(
child: new Row(children: <Widget>[
new Flexible(
child: new Container(),
flex: 1,
),
new Container(
width: 16.0,
height: 1.0,
),
new Container(
width: 1.0,
color: Colors.blueAccent,
),
new Container(
width: 16.0,
height: 1.0,
color: Colors.blueAccent,
),
new Flexible(
child: new Container(
child: buildListData(
context, Color.fromARGB(40, 50, 40, 80), 上班签到),
),
flex: 1,
),
]),
),
flex: 1,
),
new Flexible(
child: new Container(
child: new Row(children: <Widget>[
new Flexible(
child: new Container(
child: buildListData(context, Colors.greenAccent, 下班签退),
),
flex: 1,
),
new Container(
width: 16.0,
height: 1.0,
color: Colors.blueAccent,
),
new Container(
width: 1.0,
color: Colors.blueAccent,
),
new Container(
width: 16.0,
height: 1.0,
),
new Flexible(
child: new Container(),
flex: 1,
),
]),
),
flex: 1,
),
new Container(
height: 60.0,
child: new Center(
child: new Text(
请及时签到哦~,
style: new TextStyle(color: Colors.blue, fontSize: 16.0),
),
),
),
],
),
);
}
Widget buildListData(BuildContext context, Color color, String text) {
return new Center(
child: new GestureDetector(
child: new CircleAvatar(
backgroundColor: color,
radius: 72.0,
child: new Text(
text,
style: new TextStyle(color: Colors.blue, fontSize: 18.0),
),
),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: new Text(
温馨提示,
style: new TextStyle(
color: Colors.black54,
fontSize: 18.0,
),
),
content: new Text(您点击的item内容为:$text),
);
},
);
},
),
);
}
}
小菜刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。
以上是关于Flutter 专题12 图解圆形与权重/比例小尝试 #yyds干货盘点#的主要内容,如果未能解决你的问题,请参考以下文章
Flutter 专题49 图解 Flutter 与 Android 原生交互 #yyds干货盘点#
Flutter 专题16 图解 ListView下拉刷新与上拉加载 #yyds干货盘点#
Flutter 专题17 图解 ListView下拉刷新与上拉加载 #yyds干货盘点#
Flutter 专题15 图解 ListView 异步加载数据与等待 #yyds干货盘点#