「这是我参加11月更文应战的第7天,活动概况检查:2021终究一次更文应战」

Hi

  • Wechat: RyukieW
  • 微信公众号:LabLawliet
  • 技术文章归档
  • Github
我的个人项目 扫雷Elic 无尽天梯 梦见账本 隐私拜访记载
类型 游戏 财务 工具
AppStore Elic Umemi 隐私拜访记载

更多专栏:

Lawliet的独立开发碎碎念

Lawliet的iOS游园会

Lawliet的iOS底层实验室

Lawliet的iOS逆向实验室

Lawliet的刷题小本本

前语

咱们在构建如微信联系人页类似的 Cell 时,主要有两种。一种是加载网络图片,用来实际咱们的联系人;一种是本地图片,用来闪现一些系统进口,如公众号等。那么怎么高雅的结束这样对两种办法数据展示的 Cell 呢?凭借这个场景,咱们来了解一下 断语

Flutter小技巧|经过多样式Cell看断语

不运用断语

这样的代码,并没有什么显着问题。

  • 一般联系人传入 avatarUrl 网络图片
  • 系统进口传入 assetName 资源名称
  • avatarUrl 和 assetName 都是可选字段,即均可为空

这样的风险是无法确保至少有一个是有值的。下面咱们运用断语进行优化,假设两者都为空就会抛出失常。

class _ContactCell extends StatelessWidget {
  const _ContactCell({
    required this.name,
    this.avatarUrl,
    this.assetName,
  });
  final String name;
  final String? avatarUrl;
  final String? assetName;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.white,
      child: Stack(
        children: [
          Row(
            children: [
              Row(
                children: [
                  const SizedBox(
                    width: 12,
                  ),
                  avatarUrl != null
                      ? Container(
                          width: 48,
                          height: 48,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                              image: NetworkImage(avatarUrl!),
                            ),
                          ),
                        )
                      : Container(),
                  assetName != null
                      ? Container(
                          width: 48,
                          height: 48,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                              image: AssetImage(assetName!),
                            ),
                          ),
                        )
                      : Container(),
                  const SizedBox(
                    width: 12,
                  ),
                  Text(
                    name,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Positioned(
            left: 50,
            bottom: 0,
            child: Container(
              height: 1,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}

运用断语进行优化

这里在结构办法加了断语: assert((avatarUrl != null || assetName != null), '至少一张图片')

假设两者都为空,那么就会抛出如图失常:

Flutter小技巧|经过多样式Cell看断语

class _ContactCell extends StatelessWidget {
  const _ContactCell({
    required this.name,
    this.avatarUrl,
    this.assetName,
  }) : assert((avatarUrl != null || assetName != null), '至少一张图片');
  final String name;
  final String? avatarUrl;
  final String? assetName;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      color: Colors.white,
      child: Stack(
        children: [
          Row(
            children: [
              Row(
                children: [
                  const SizedBox(
                    width: 12,
                  ),
                  avatarUrl != null
                      ? Container(
                          width: 48,
                          height: 48,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                              image: NetworkImage(avatarUrl!),
                            ),
                          ),
                        )
                      : Container(),
                  assetName != null
                      ? Container(
                          width: 48,
                          height: 48,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(4),
                            image: DecorationImage(
                              image: AssetImage(assetName!),
                            ),
                          ),
                        )
                      : Container(),
                  const SizedBox(
                    width: 12,
                  ),
                  Text(
                    name,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ],
              ),
            ],
          ),
          Positioned(
            left: 50,
            bottom: 0,
            child: Container(
              height: 1,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}