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

举报
阿策小和尚 发表于 2022/01/20 09:07:54 2022/01/20
【摘要】 0 基础学习 Flutter,第十二步:简单尝试圆形及权重小知识点!

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

绘制圆形

      小菜为了页面稍微美观一点,准备用圆形来替换普通的按钮,小菜发现 Flutter 提供了很多便捷的绘制圆形的方式,比 Android 要方便很多。小菜测试时用到了如下两种:

ClipOval

      ClipOval 是一个很强大的裁剪子控件为椭圆或圆角的控件;子控件没有特殊限制。同时衍生出其他几种裁剪方式:

  1. CustomClipper:可以创建自定义裁剪方式;
  2. ClipRect:可以裁剪不同宽高比例,通过 heightFactor 属性来处理;
  3. ClipRRect:可以设置圆角矩形或圆形;
  4. 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 常用 RowColumn 来设置横向和纵向布局。小菜发现可以通过如下方式来处理权重/比例

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 继承的是 FlexibleFlexible 支持的分割布局权重的方式 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 小菜都建议依靠 RowColumn 共同使用。小菜测试,两者一起使用也不会太大影响。

主要源码

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 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。

来源:阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200