Flutter 专题12 图解圆形与权重/比例小尝试 #yyds干货盘点#

行是知之始,知是行之成。这篇文章主要讲述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), ); }, ); }, ), ); } }