Flutter合理拆分widgets

最新推荐文章于 2023-05-26 15:28:33 发布

zfpp25_

最新推荐文章于 2023-05-26 15:28:33 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter

本文链接：https://blog.csdn.net/lizhongfu2013/article/details/116089845

本文探讨了在Flutter开发中如何合理拆分Widgets以提高代码可维护性和性能。介绍了何时拆分Widgets的情况，如过大、重复和复杂组件，并提供了三种拆分方案：属性方式、函数方式和functional_widget库。强调了functional_widget在减少代码量和提高抽象性方面的优势，同时分享了利用Flutter Outline工具进行快速拆分的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学Flutter，好多Demo中widgets层层嵌套，最后导致一个页面的代码量非常大，嵌套非常深，不利于维护，于是想到拆分。

何时拆分：

大Widget：当一个Widget非常大，嵌套层数过多，其中嵌套了很多小Widget的时候，把一个小Widget从大Widget中拆分出来，这样利于维护；
重复Widgets：当一个Widget由多个重复的小Widget组成，应当把小Widget拆分出来；
复杂Widget：当一个Widget有很多小Widgets组成，而且组合关系很复杂的时候，应该拆分，这样更能利于理解。

拆分方案：

看了很多资料，拆分方案也有几种，下面一一介绍：

方案一：

var left = Container(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(5),
    child: Image.asset(
      //头像
      "images/娜美.jpg",
      fit: BoxFit.cover,
    ),
  ),
  width: 50,
  height: 50,
);

var leftWrap = Stack(
  alignment: Alignment(1.2, -1.2),
  children: <Widget>[
    left,
    ClipOval(child: Container(width: 10, height: 10, color: Colors.red,),)
  ],);

var center = Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text("心如止水", style: nameTextStyle),
    Text(
      "在吗?小哥哥",
      style: infoTextStyle,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
    )
  ],
);

var right = Column(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Text("06:45", style: infoTextStyle),
    Icon(
      Icons.visibility_off,
      size: 18,
      color: Color(0xff999999),
    )
  ],
);

var body = Row(
  children: <Widget>[leftWrap, Expanded(child: center,), right],//使用Expanded
);

属