Flutter2.x 入门指南：10 分钟实现列表功能

2023-12-04 17:43:26

Flutter 2.x 教程：构建一个简单的列表应用程序

简介

对于想要跨平台构建令人惊叹的应用程序的开发人员来说，Flutter 2.x 是一个福音。这款由 Google 开发的开源框架提供了一系列功能，让创建移动、网络和桌面应用程序变得轻而易举。让我们踏上激动人心的旅程，使用 Flutter 2.x 构建一个简单的列表应用程序，同时探索它的强大功能。

创建 Flutter 项目

首先，你需要创建一个新的 Flutter 项目。确保你的计算机上安装了 Flutter SDK，然后使用你喜欢的代码编辑器（如 Android Studio 或 Visual Studio Code）。选择一个项目名称（如 "flutter_list_app"）和位置，然后单击 "创建项目"。

添加列表视图

列表视图是显示项目列表的常用组件。在 "main.dart" 文件中，导入 Flutter 库，创建一个 "MyApp" 类，并在 "MyHomePage" 类中创建一个 "ListView"。

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter List App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = <String>['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter List App'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}