ListView 小记事本

2023-09-22 22:28:16

Flutter 开发从 0 到 1（三）布局与 ListView

1. 什么是 ListView？

ListView 是 Flutter 中最常用的组件。它允许您垂直或水平滚动列表中的项目。它与 ScrollView 类似，但提供了更细粒度的控制。ListView 可以与其他小部件结合使用，如 Button、Text、Image 等，以创建更复杂的 UI 元素。

2. ListView 的类型

ListView 有两个主要类型：

ListView.builder: 此 ListView 类型允许您动态创建项目。它非常高效，因为它仅创建屏幕上可见的项目，并按需加载其他项目。
ListView.separated: 此 ListView 类型允许您在项目之间插入分隔符。这可以用来创建分组的列表或其他需要分隔的项目。

3. ListView 的优缺点

ListView 有一些优点，包括：

高效： ListView 仅创建屏幕上可见的项目，并按需加载其他项目，这使其非常高效。
灵活性： ListView 可以与其他小部件结合使用，以创建更复杂的 UI 元素。
易用： ListView 易于使用，即使对于初学者也是如此。

ListView 也有一些缺点，包括：

内存消耗： ListView 可能比 ScrollView 更内存消耗。
滚动延迟： ListView 可能会遇到滚动延迟，尤其是在项目列表非常长时。
复杂性： ListView 比 ScrollView 更复杂，因此更难实现。

4. ListView 小记事本

现在我们已经了解了 ListView 的基本概念，让我们来看看如何使用它来构建一个简单的小记事本。

第 1 步：创建项目

要创建项目，请使用以下代码：

flutter create my_notepad

第 2 步：添加依赖关系

将以下依赖关系添加到 pubspec.lock 文件中：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  cupertino_icons:
    sdk: flutter

第 3 步：创建 UI

接下来，让我们创建 UI。

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomePageState();
  }
}

class HomePageState extends State<StatefulWidget> {
  final List<String> notes = <String>[]();
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller),
        Button(Icons.send, () {
          setState(() {
            notes.add(controller.text);
            controller.clear();
          });
        }),
        ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(title: Text(notes[index]),);
            },
            itemCount: notes.length,
          ),
        ],
      );
  }
}