【Flutter】自定义cell实现我的界面列表！微信项目实战（03-下）

2024-02-07 00:16:58

用 Flutter 构建微信“我的”界面：列表控件

自定义列表单元格

微信“我的”界面中的列表包含各种信息，包括个人资料、设置选项和最近活动。要创建这些列表项，我们需要定义自定义单元格类。单元格类继承自 ListTile，它提供了基本的列表项功能。

class MyCell extends ListTile {
  MyCell({
    Key? key,
    required this.title,
    this.subtitle,
    this.trailing,
  }) : super(
    key: key,
    title: Text(title),
    subtitle: subtitle != null ? Text(subtitle) : null,
    trailing: trailing,
  );

  final String title;
  final String? subtitle;
  final Widget? trailing;
}

单元格类具有三个属性：title（标题）、subtitle（副标题）和 trailing（尾部小部件，例如图标或箭头）。

单元格设计

单元格的外观由其 build 方法决定。在该方法中，我们使用 Container、Row 和 Expanded 等小部件来排列元素。

@override
Widget build(BuildContext context) {
  return Container(
    padding: const EdgeInsets.all(16.0),
    child: Row(
      children: <Widget>[
        const Icon(Icons.account_circle),
        const SizedBox(width: 16.0),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(title),
              if (subtitle != null) Text(subtitle),
            ],
          ),
        ),
        trailing ?? const SizedBox.shrink(),
      ],
    ),
  );
}

布局包括一个图标、标题和可选的副标题，以及右对齐的尾部小部件。

单元格点击事件

要使单元格可点击，我们需要重写 onTap 方法。

@override
void onTap() {
  print('单元格已点击');
}

这会将一条消息打印到控制台中，指示单元格已被点击。

单元格数据绑定

最后，我们将单元格数据绑定到列表。我们使用 ListView.builder 创建一个可变长的列表。

ListView.builder(
  itemCount: 10,
  itemBuilder: (BuildContext context, int index) {
    return MyCell(
      title: '标题 $index',
      subtitle: '副标题 $index',
      trailing: const Icon(Icons.arrow_forward_ios),
    );
  },
)