Flutter新手入门指南：构建简单界面和ListView展示

2023-09-02 03:06:50

1. 导入必要的库

想要使用Flutter进行开发，需要导入必要的库。在您的Dart文件中添加以下代码：

import 'package:flutter/material.dart';

2. 设置runApp方法

runApp方法是Flutter应用程序的入口点，也是Flutter应用程序启动时调用的第一个方法。它负责将应用程序的根Widget加载到屏幕上。在您的Dart文件中添加以下代码：

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

3. 创建主页

MyApp类是Flutter应用程序的主类。它是一个StatelessWidget，这意味着它没有状态。在您的Dart文件中添加以下代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

4. 添加ListView控件

ListView控件是Flutter中用于展示列表数据的控件。它可以展示单行或多行的列表数据，并且可以垂直或水平滚动。在您的Dart文件中添加以下代码：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
        ],
      ),
    );
  }
}

5. 使用代码填充数据

现在，您可以使用代码来填充ListView中的数据。在您的Dart文件中添加以下代码：

List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

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