无缝集成：Flutter 小技巧之多样式 Cell 断言实现

2023-11-19 23:07:58

构建类似微信联系人页的 Cell 时，我们通常需要两种类型的 Cell：一种用于加载网络图片以显示联系人，另一种用于使用本地图片显示系统入口（如公众号）。如何优雅地实现对这两种形式数据展示的 Cell 呢？本文将通过一个简单的示例来介绍如何在 Flutter 中实现此功能，并使用断言来确保其正常工作。

实现步骤

1. 创建自定义 Cell 组件

首先，我们需要创建一个自定义 Cell 组件，该组件将负责显示联系人或系统入口信息。该组件的代码如下：

import 'package:flutter/material.dart';

class CustomCell extends StatelessWidget {
  final String title;
  final String subtitle;
  final String imageUrl;
  final bool isLocalImage;

  const CustomCell({
    Key? key,
    required this.title,
    required this.subtitle,
    required this.imageUrl,
    required this.isLocalImage,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: isLocalImage
            ? AssetImage(imageUrl)
            : NetworkImage(imageUrl),
      ),
      title: Text(title),
      subtitle: Text(subtitle),
    );
  }
}

在上面的代码中，我们定义了一个名为 CustomCell 的类，该类继承自 StatelessWidget。该类包含四个属性：title、subtitle、imageUrl 和 isLocalImage。其中，title 和 subtitle 分别用于显示联系人的名称和子标题，imageUrl 用于指定联系人或系统入口的图片 URL，isLocalImage 用于指示该图片是本地图片还是网络图片。

2. 在 Cell 中使用断言

为了确保 Cell 组件正常工作，我们可以使用断言来检查属性值是否有效。例如，我们可以添加以下断言：

assert(title != null && title.isNotEmpty);
assert(subtitle != null && subtitle.isNotEmpty);
assert(imageUrl != null && imageUrl.isNotEmpty);
assert(isLocalImage != null);

这些断言将检查 title、subtitle、imageUrl 和 isLocalImage 的值是否为空或无效。如果任何一个断言失败，则会抛出异常，并中止程序。这可以帮助我们提前发现问题，从而避免出现运行时错误。

3. 在 ListView 中使用 Cell 组件

接下来，我们需要在 ListView 中使用 CustomCell 组件来显示联系人或系统入口信息。该代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 小技巧'),
        ),
        body: ListView(
          children: [
            CustomCell(
              title: '张三',
              subtitle: '软件工程师',
              imageUrl: 'https://avatars.githubusercontent.com/u/123456789?v=4',
              isLocalImage: false,
            ),
            CustomCell(
              title: '公众号',
              subtitle: '关注公众号，获取更多资讯',
              imageUrl: 'assets/images/公众号.png',
              isLocalImage: true,
            ),
          ],
        ),
      ),
    );
  }
}