Flutter嵌套地狱

news2024/10/5 15:30:06

在这里插入图片描述


@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        height: 45,
        child: Row(
          children: <Widget>[
            SizedBox(
              width: 30,
            ),
            Icon(
              Icons.notifications,
              color: Colors.blue,
            ),
            SizedBox(
              width: 30,
            ),
            Expanded(
              child: Text('消息中心'),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.all(Radius.circular(50)),
                  color: Colors.red),
              child: Text(
                '2',
                style: TextStyle(color: Colors.white),
              ),
            ),
            SizedBox(
              width: 15,
            ),
          ],
        ),
      ),
      Divider(),
      //类似上面的布局写6个
    ],
  );
}

或许说可以将每一个 Item封装为一个方法,写法如下:


_buildItem(IconData iconData, Color iconColor, String title, Widget widget) {
  return Container(
    height: 45,
    child: Row(
      children: <Widget>[
        SizedBox(
          width: 30,
        ),
        Icon(
          iconData,
          color: iconColor,
        ),
        SizedBox(
          width: 30,
        ),
        Expanded(
          child: Text('$title'),
        ),
        widget,
        SizedBox(
          width: 15,
        ),
      ],
    ),
  );
}

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
      _buildItem(...),
      Divider(),
    ],
  );
}

这样看起来好多了,基本解决了嵌套地狱问题,但这样写还存在一个非常大的问题-性能问题,一旦其中一个数字发生变化,整个页面都要重建,Flutter 开发中非常重要的一个原则就是 尽可能少的重建组件,因此将上面封装到方法中组件变为一个 Widget。


class SettingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _SettingItem(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '消息中心',
          suffix: _NotificationsText(
            text: '2',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          title: '我赞过的',
          suffix: _Suffix(
            text: '121篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          title: '收藏集',
          suffix: _Suffix(
            text: '2个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.shopping_basket,
          iconColor: Colors.yellow,
          title: '已购小册',
          suffix: _Suffix(
            text: '100个',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          title: '我的钱包',
          suffix: _Suffix(
            text: '10万',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.location_on,
          iconColor: Colors.grey,
          title: '阅读过的文章',
          suffix: _Suffix(
            text: '1034篇',
          ),
        ),
        Divider(),
        _SettingItem(
          iconData: Icons.local_offer,
          iconColor: Colors.grey,
          title: '标签管理',
          suffix: _Suffix(
            text: '27个',
          ),
        ),
      ],
    );
  }
}

class _SettingItem extends StatelessWidget {
  const _SettingItem(
      {Key key, this.iconData, this.iconColor, this.title, this.suffix})
      : super(key: key);

  final IconData iconData;
  final Color iconColor;
  final String title;
  final Widget suffix;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(iconData,color: iconColor,),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }
}

class _NotificationsText extends StatelessWidget {
  final String text;

  const _NotificationsText({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(50)),
          color: Colors.red),
      child: Text(
        '$text',
        style: TextStyle(color: Colors.white),
      ),
    );
  }
}

class _Suffix extends StatelessWidget {
  final String text;

  const _Suffix({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      '$text',
      style: TextStyle(color: Colors.grey.withOpacity(.5)),
    );
  }
}

封装为一个个单独的小组件,将有变化的组件尽量单独封装,这样就不会重建整个控件树,增强了可读性和可维护性,而且对性能有很大的提升。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698959.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

华为OD机试真题 Python 实现【计算网络信号】【2023Q2 200分】

一、题目描述 网络信号经过传递会逐层衰减&#xff0c;且遇到阻隔物无法直接穿透&#xff0c;在此情况下需要计算某个位置的网络信号值。 注意&#xff1a; 网络信号可以绕过阻隔物array[m][n]的二维数组代表网格地图&#xff0c;array[i][j]0代表i行j列是空旷位置&#xff…

大众点评搜索基于知识图谱的深度学习排序实践

转子&#xff1a;https://tech.meituan.com/2019/01/17/dianping-search-deeplearning.html 1. 引言 挑战与思路 搜索是大众点评App上用户进行信息查找的最大入口&#xff0c;是连接用户和信息的重要纽带。而用户搜索的方式和场景非常多样&#xff0c;并且由于对接业务种类多…

自学黑客(网络安全),一般人我劝你还是算了吧(自学网络安全学习路线--第十八章 网络监听及防御技术)【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、网络监听概述1、网络监听概念2、相关网络基础 二、监听技术1、局域网中的硬件设备简介2、共享式局域网的监听技术3、交换式局域网的监听技术 三、网络监听工具举例1、Tcp…

聚观早报 | 富士康被起诉;苹果公司股价再创新高

今日要闻&#xff1a;富士康被起诉&#xff1b;苹果公司股价再创新高&#xff1b;微信否认文件传输助手是真人&#xff1b;抖音外卖主攻60元以上套餐&#xff1b;消息称谷歌放弃研发AR智能眼镜 富士康被起诉 6 月 28 日消息&#xff0c;据外媒报道&#xff0c;美国电动卡车初…

服务注册与配置Nacos

服务注册与配置Nacos nacos 介绍nacos 特性nacos 的安装nacos 注册中心注册中心案例注册中心原理nacos服务分级存储模型 nacos 配置中心nacos 配置数据模型nacos 配置管理配置文件优先级nacos 配置持久化 nacos 集群部署 nacos 介绍 nacos 英文全称 Dynamic Naming and Config…

wsl子系统Ubuntu18.04,cuDNN安装

如果觉得本篇文章对您的学习起到帮助作用&#xff0c;请 点赞 关注 评论 &#xff0c;留下您的足迹&#x1f4aa;&#x1f4aa;&#x1f4aa; 本文主要wls子系统Ubuntu18.04安装cuDNN&#xff0c;安装cudnn坑巨多&#xff0c;因此记录以备日后查看&#xff0c;同时&#xff0…

【云原生 | 56】Docker三剑客之Docker Swarm高效使用

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 &#x1f3c5;阿里云ACE认证高级工程师 &#x1f3c5;阿里云开发者社区专…

PPT怎么插入视频?3个视频插入方法分享!

Anna是个初入职场的新人&#xff0c;最近要进行工作汇报&#xff0c;需要制作PPT并插入相关的讲解视频。但她对PPT的运用不熟悉&#xff0c;不知道应该如何操作&#xff01;特此来询问应该如何在PPT中插入视频&#xff1f; 在演示文稿中插入视频可以使PPT更加生动有趣。无论是展…

如何克服自动化测试中的壁垒和问题?

随着自动化测试技术的快速发展和普及&#xff0c;自动化测试已经成为各个行业广泛应用的重要测试手段。然而&#xff0c;自动化测试中仍然存在壁垒和问题&#xff0c;这些问题可能对测试效果产生影响&#xff0c;甚至会影响整个项目的进程。在本文中&#xff0c;我们将探讨如何…

JavaScript进阶----《getter 和 setter 是什么》

前言&#xff1a; 这两个属性在学习前端的时候看到过&#xff0c;但是由于项目中没有用到过&#xff0c;所以一直没有细致的了解。今天 review 同事代码的时候&#xff0c;遇到了这个写法&#xff0c;看了半天也不知道如何处理。再不学习真的以后连别人的代码都不知道什么意思了…

报名 | AI驱动下的流程挖掘如何提升企业决策和运营效率?

随着人工智能&#xff08;AI&#xff09;技术的不断发展和普及&#xff0c;其在各个领域的应用也越来越广泛。其中&#xff0c;一项重要的应用就是利用AI技术驱动流程挖掘&#xff0c;以提升企业决策和运营效率。 流程挖掘是一种从事件日志中发现、监控和优化实际业务流程的技…

Elasticsearch 安装

下载安装 elasticsearch下载链接 运行&#xff1a;bin\elasticsearch.bat 设置密码&#xff1a;.\bin\elasticsearch-setup-passwords interactive 这边设置密码遇到一个坑 PS G:\elasticsearch-8.8.1> .\bin\elasticsearch-setup-passwords interactiveFailed to authe…

0基础学习VR全景平台篇 第52篇:高级功能-开场加载!

大家好&#xff0c;欢迎观看蛙色VR官方系列——后台使用课程&#xff01; 本期为大家带来蛙色VR平台&#xff0c;高级功能-开场加载&#xff01; 功能位置示意 一、本功能将用在哪里&#xff1f; 开场加载&#xff0c;指作品制作上线&#xff0c;观看者打开VR漫游作品首先看到…

机器学习技术(一)——python基础超详解

机器学习技术&#xff08;一&#xff09;——python基础超详解 文章目录 机器学习技术&#xff08;一&#xff09;——python基础超详解0、引言1、基础概念**:snake:变量****:snake:注释****:snake:输入 输出** 2、数据类型**:snake:数值类型****:snake:运算符****:snake:字符串…

直播预约 | 邀您共同探讨“云XR技术如何改变元宇宙的虚拟体验”

随着数字化时代的到来&#xff0c;元宇宙成为了人们关注的焦点。它是一个虚拟的世界&#xff0c;融合了现实与虚拟的元素&#xff0c;让人们可以以全新的方式进行交互、创作和体验。 云XR技术是元宇宙建设的重要支撑技术之一&#xff0c;元宇宙需要具备高度真实感、高度交互性…

7DGroup性能实施项目日记6

九月廿三 壬寅年 虎 庚戌月 甲辰日 全国在降温之际 不管如何&#xff0c;今天总算是执行起来了脚本。在配置了性能工具之Jmeter 后置监听器可视化数据逻辑的界面中&#xff0c;看到下图&#xff1a; 显然 TPS 在这个接口中能达到 1500 以上&#xff0c;这对第一次执行来说&am…

最优化--最大似然估计--最优化理论介绍

目录 最大似然估计 概念 最大似然估计原理 应用 最优化理论介绍 最优化问题 迭代求解 最大似然估计 概念 最大似然估计&#xff08;Maximum Likelihood Estimation&#xff0c;MLE&#xff09;是统计学中一种常用的参数估计方法。它基于观测数据&#xff0c;通过寻找…

win11禁止运行脚本的解除方法

win11使用Windows PowerShell执行脚本时&#xff0c;提示本系统上禁止运行脚本 解决办法&#xff08;按照步骤进行&#xff09;&#xff1a; 先以管理员身份运行PowerShell。 命令行输入set-ExecutionPolicy RemoteSigned回车&#xff0c;然后输入Y回车即可。至此问题解决。若…

向量的傅里叶变换

note 若要求矩阵的傅里叶变换&#xff0c;则对每个行或列向量求对应的傅里叶变换。 比如matlab中对矩阵求fft傅里叶变换就是对每个列向量分别求傅里叶变换。 code /*\brief:离散傅里叶变换\param dir:变换方向&#xff0c;-1为傅里叶正变换&#xff0c;1为傅里叶反变换\param…

LLM - 第2版 ChatGLM2-6B (General Language Model) 的工程配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131445696 ChatGLM2-6B 是开源中英双语对话模型 ChatGLM-6B 的第二代版本&#xff0c;在保留了初代模型对话流畅、部署门槛较低等众多优…