【Flutter 专题】12 图解圆形与权重 / 比例小尝试

作者：阿策小和尚

2021 年 11 月 11 日
本文字数：3312 字
阅读完需：约 11 分钟

小菜今天搭建了一个很丑的【签到】小页面，页面很简单，只有寥寥几个控件，但小菜想通过这个简单的小页面学习一下权重/比例的使用方式，顺便也学习了一下如何绘制圆形效果。

绘制圆形

小菜为了页面稍微美观一点，准备用圆形来替换普通的按钮，小菜发现 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 时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。

来源：阿策小和尚

发布于: 16 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/8061515e75d315452cd7d6e0d】。文章转载请联系作者。

阿策小和尚

关注

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟～

发布

暂无评论

创作场景

【Flutter 专题】12 图解圆形与权重 / 比例小尝试

绘制圆形

ClipOval

CircleAvatar

权重/比例

Flexible

Expanded

主要源码

阿策小和尚

评论