[Flutter] 列表数据的使用和 widget 封装

1. 使用列表

列表的原理是利用 Column 展示一个数组中的数据，其过程是：

准备一个 List<Data>
将数据数组映射为 widget 数组

data.map((item) => SomeWidget(item)).toList();

将 widget 数组放入 Column 的 children 属性中

注意 1：map 是 List 实现的映射方法，可以一个数组映射为另一个类型的数组
注意 2：为方便起见可以在 map 函数内部使用箭头函数

示例代码：

class ListState extends State<CardHome> {
  int level = 2;
  List<String> list = [
    "OC",
    "Swift",
    "Flutter",
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Flutter 笔记"),
        centerTitle: true,
        backgroundColor: Colors.grey[850],
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30, 40, 30, 0),
        child: Column(
          children: list.map ((item) => Text(item)).toList(),
          // children: list.map ((item) {return Text(item);}).toList(),
        ),
    ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            level += 1;
            list.add("$level");
          });
        },
        backgroundColor: Colors.grey[400],
        child: Icon(Icons.add),
      ),
    );
  }
}

2. 自定义数据结构

一般模型对象会有多个属性，可以使用一个 class 进行承载：

class Message {
    String text;
    String author;
    Message({this.text, this.author});
}

那么可以在列表中进行 list 的使用

Column(
    children: list.map( (item) => Text("${item.author}: ${item.text})
                  .toList();
),

可以将 Message 这个类用单独的一个文件 message.dart 放到 lib 中，并在 main.dart 进行 import 后使用

import 'message.dart';

3. 封装 widget

一个 widget 代码比较多时可以将代码抽出来封装一个新的 widget，对于依赖外部数据的还需要引入属性，举例：

// message_card.dart
class MessageCard extends StatelessWidget {
    Message data;
    Message(this.data);

    @override
   Widget build(buildContext context) {
        return Column(
                children: <Widget>[Text(data.author), Text(data.text)],
            ),
    }
}

同样地，可以新建一个 message_card.dart 文件到 lib 中。

这样就可以在列表中直接使用 MessageCard

```Dart
Column(
    children: list.map( (item) => MessageCard(item))
                  .toList();
),

最后编辑于：2020.08.05 19:12:09