首页手记 Flutter列表组件项目实战：从入门到简单应用

Flutter列表组件项目实战：从入门到简单应用

标签：

移动开发

概述

本文将详细介绍如何使用Flutter列表组件构建一个简单的待办事项项目，涵盖列表组件的基本用法、性能优化以及动态更新等关键点。通过实战项目，你将学会如何添加、删除和修改待办事项，并实现数据持久化功能。本文适合有一定Flutter基础的开发者，帮助你更深入地理解和掌握Flutter的列表组件项目实战。flutter列表组件项目实战将在本文中得到全面展示。

Flutter简介与环境搭建

什么是Flutter

Flutter是由Google开发的开源UI框架，用于构建跨平台移动应用程序。它允许开发者使用单一代码库来创建iOS和Android的高质量原生应用。Flutter拥有自己的渲染引擎，可以设计出精美且性能优越的界面。

安装Flutter SDK

安装Flutter SDK之前，需要确保已安装好必要的开发工具，例如Android Studio或VS Code以及Java开发工具包（JDK）。

步骤如下：

访问Flutter官方网站下载Flutter SDK。
解压下载的文件到指定的目录。
配置环境变量，将Flutter工具的路径添加到系统的环境变量PATH中。

在Windows系统上，可以将以下路径添加到环境变量PATH：

C:\flutter\bin

在Mac或Linux系统上，可以将以下路径添加到环境变量PATH：

/Users/your-username/flutter/bin

配置开发环境

安装Flutter SDK后，需要配置相应的开发环境，确保可以顺利运行Flutter项目。具体步骤如下：

安装Flutter插件：在VS Code或Android Studio中安装Flutter和Dart插件，具体代码示例如下：
- 在VS Code中安装Flutter插件：
```
// VS Code中安装Flutter插件
```
- 在Android Studio中安装Flutter插件：
```
// Android Studio中安装Flutter插件
```
配置Flutter的模拟器或真机：确保Android Studio中已经安装了Android SDK和模拟器。
检查是否安装成功：在命令行中输入flutter doctor，运行检查工具，确保所有组件都已正确安装。

创建第一个Flutter项目

创建Flutter项目可以使用命令行或IDE工具完成。

使用命令行创建项目

在命令行中使用以下命令来创建一个新的Flutter项目：

flutter create first_flutter_app
cd first_flutter_app

使用IDE创建项目

在VS Code或Android Studio中，选择Flutter模板创建新项目：

// 在VS Code或Android Studio中创建Flutter项目

创建完成后，可以在项目根目录中找到主文件lib/main.dart，这是应用的入口文件。

运行项目

可以通过命令行运行项目：

flutter run

或者在IDE中点击运行按钮，此时应用将在模拟器或连接的设备上启动。

初识Flutter列表组件

StatelessWidget与StatefulWidget

在Flutter中，组件分为StatelessWidget和StatefulWidget两种类型。

StatelessWidget：无状态组件，表示状态不可变的UI元素。一旦创建，其结构不会改变。
StatefulWidget：有状态组件，表示状态可以改变的UI元素，可以随状态变化而更新。

StatelessWidget示例

import 'package:flutter/material.dart';

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

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

StatefulWidget示例

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Text('Counter: $_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

常用列表组件介绍

常用的列表组件有ListView和GridView，用于构建滚动列表和网格布局。

ListView

ListView用于创建垂直或水平的滚动列表。其构造函数包含多种类型，例如ListView.builder用于构建性能优化的列表。

GridView

GridView用于创建网格布局的滚动列表。其构造函数包含多种类型，例如GridView.count用于设置固定的列数。

创建简单的列表

下面是一个简单的ListView示例，展示如何创建一个包含文本项的列表。

ListView示例

import 'package:flutter/material.dart';

class SimpleList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple List'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
        ],
      ),
    );
  }
}

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

使用ListView构建基础列表

ListView的基本用法

ListView是最基本的列表组件，用于创建垂直滚动的列表。

基本示例

import 'package:flutter/material.dart';

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

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

ListView.builder优化列表性能

ListView.builder通过延迟构建列表项来优化性能，尤其适用于大量数据的列表。

ListView.builder示例

import 'package:flutter/material.dart';

class OptimizedListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Optimized ListView'),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }
}

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

列表项的点击事件处理

处理列表项的点击事件可以使用onTap回调函数。

列表项点击示例

import 'package:flutter/material.dart';

class ListTapExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List Item Tap'),
      ),
      body: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
            onTap: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: Text('Item Tapped'),
                    content: Text('You tapped Item $index'),
                  );
                },
              );
            },
          );
        },
      ),
    );
  }
}

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

GridView的使用与布局优化

GridView的基本使用

GridView用于创建网格布局的滚动列表。

基本示例

import 'package:flutter/material.dart';

class BasicGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Basic GridView'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Center(
              child: Text('Item 1'),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Text('Item 2'),
            ),
          ),
          Container(
            color: Colors.blue,
            child: Center(
              child: Text('Item 3'),
            ),
          ),
        ],
      ),
    );
  }
}

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

GridView.builder与GridTile的应用

GridView.builder通过延迟构建列表项来优化性能，GridTile则用于定义列表项的布局。

GridView.builder示例

import 'package:flutter/material.dart';

class OptimizedGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Optimized GridView'),
      ),
      body: GridView.builder(
        itemCount: 100,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemBuilder: (context, index) {
          return GridTile(
            child: Container(
              color: Colors.primaries[index % Colors.primaries.length],
              child: Center(
                child: Text('Item $index'),
              ),
            ),
          );
        },
      ),
    );
  }
}

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

列表布局的灵活调整

可以通过调整GridDelegate参数实现列表布局的灵活调整。

灵活布局示例

import 'package:flutter/material.dart';

class FlexibleGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flexible Grid'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Center(
              child: Text('Item 1'),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Text('Item 2'),
            ),
          ),
          Container(
            color: Colors.blue,
            child: Center(
              child: Text('Item 3'),
            ),
          ),
        ],
      ),
    );
  }
}

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

列表数据的动态更新

使用FutureBuilder加载异步数据

FutureBuilder用于加载异步数据，可以实现数据的动态更新。

FutureBuilder示例

import 'package:flutter/material.dart';

Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return 'Data Loaded';
}

class AsyncDataLoader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Data Loader'),
      ),
      body: FutureBuilder<String>(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Error: ${snapshot.error}'),
            );
          } else if (snapshot.hasData) {
            return Center(
              child: Text(snapshot.data!),
            );
          } else {
            return Center(
              child: Text('Unknown Error'),
            );
          }
        },
      ),
    );
  }
}

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

列表项的增删改查操作

对列表项进行增删改查操作可以通过修改列表数据来实现。

列表项增删改查示例

import 'package:flutter/material.dart';

class TodoItem {
  final String title;
  bool done;

  TodoItem({
    required this.title,
    this.done = false,
  });
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final List<TodoItem> _todoList = [
    TodoItem(title: 'Learn Flutter'),
    TodoItem(title: 'Build App', done: true),
  ];

  void _addTodo(String title) {
    setState(() {
      _todoList.add(TodoItem(title: title));
    });
  }

  void _toggleTodo(TodoItem todo) {
    setState(() {
      todo.done = !todo.done;
    });
  }

  void _removeTodo(TodoItem todo) {
    setState(() {
      _todoList.remove(todo);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: ListView.builder(
        itemCount: _todoList.length,
        itemBuilder: (context, index) {
          final todo = _todoList[index];
          return ListTile(
            leading: Checkbox(
              value: todo.done,
              onChanged: (value) => _toggleTodo(todo),
            ),
            title: Text(todo.title),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => _removeTodo(todo),
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final title = TextEditingController();
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('Add Todo'),
                content: TextField(
                  controller: title,
                ),
                actions: [
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                      _addTodo(title.text);
                    },
                    child: Text('Add'),
                  ),
                ],
              );
            },
          );
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

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

列表刷新机制实现

刷新列表可以通过调用setState来实现，从而触发列表的重建。

列表刷新示例

import 'package:flutter/material.dart';

class RefreshableList extends StatefulWidget {
  @override
  _RefreshableListState createState() => _RefreshableListState();
}

class _RefreshableListState extends State<RefreshableList> {
  final List<String> _items = ['Item 1', 'Item 2', 'Item 3'];

  void _refreshList() {
    setState(() {
      _items.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Refreshable List'),
        actions: [
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: _refreshList,
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
    );
  }
}

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

项目实战：打造一个简单的待办事项应用

项目需求分析

待办事项应用的基本功能包括：

显示所有待办事项
添加新的待办事项
删除待办事项
修改待办事项状态

设计界面布局

应用界面包括列表展示、添加新事项、编辑事项等功能。

布局设计示例

import 'package:flutter/material.dart';

class TodoItem {
  final String title;
  bool done;

  TodoItem({
    required this.title,
    this.done = false,
  });
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final List<TodoItem> _todoItems = [
    TodoItem(title: 'Learn Flutter'),
    TodoItem(title: 'Build App', done: true),
  ];

  void _addTodo(String title) {
    setState(() {
      _todoItems.add(TodoItem(title: title));
    });
  }

  void _toggleTodo(TodoItem todo) {
    setState(() {
      todo.done = !todo.done;
    });
  }

  void _removeTodo(TodoItem todo) {
    setState(() {
      _todoItems.remove(todo);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todoItems.length,
              itemBuilder: (context, index) {
                final todo = _todoItems[index];
                return ListTile(
                  leading: Checkbox(
                    value: todo.done,
                    onChanged: (value) => _toggleTodo(todo),
                  ),
                  title: Text(todo.title),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => _removeTodo(todo),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                labelText: 'Add new todo',
                suffixIcon: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    final title = TextEditingController().text;
                    if (title.isNotEmpty) {
                      _addTodo(title);
                    }
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

实现新增、删除、修改待办事项功能

这些功能通过修改状态来实现，使用setState更新UI。

完整示例代码

import 'package:flutter/material.dart';

class TodoItem {
  final String title;
  bool done;

  TodoItem({
    required this.title,
    this.done = false,
  });
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final List<TodoItem> _todoItems = [
    TodoItem(title: 'Learn Flutter'),
    TodoItem(title: 'Build App', done: true),
  ];

  void _addTodo(String title) {
    setState(() {
      _todoItems.add(TodoItem(title: title));
    });
  }

  void _toggleTodo(TodoItem todo) {
    setState(() {
      todo.done = !todo.done;
    });
  }

  void _removeTodo(TodoItem todo) {
    setState(() {
      _todoItems.remove(todo);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todoItems.length,
              itemBuilder: (context, index) {
                final todo = _todoItems[index];
                return ListTile(
                  leading: Checkbox(
                    value: todo.done,
                    onChanged: (value) => _toggleTodo(todo),
                  ),
                  title: Text(todo.title),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => _removeTodo(todo),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                labelText: 'Add new todo',
                suffixIcon: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    final title = TextEditingController().text;
                    if (title.isNotEmpty) {
                      _addTodo(title);
                    }
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

添加保存和读取数据功能

可以使用SharedPreferences来保存和读取数据。

使用SharedPreferences保存数据

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class TodoItem {
  final String title;
  bool done;

  TodoItem({
    required this.title,
    this.done = false,
  });
}

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  final List<TodoItem> _todoItems = [];

  @override
  void initState() {
    super.initState();
    _loadTodos();
  }

  void _loadTodos() async {
    final prefs = await SharedPreferences.getInstance();
    final data = prefs.getStringList('todos');
    if (data != null) {
      setState(() {
        _todoItems
          ..clear()
          ..addAll(data.map((e) => TodoItem(title: e)));
      });
    }
  }

  void _addTodo(String title) {
    setState(() {
      _todoItems.add(TodoItem(title: title));
      _saveTodos();
    });
  }

  void _toggleTodo(TodoItem todo) {
    setState(() {
      todo.done = !todo.done;
      _saveTodos();
    });
  }

  void _removeTodo(TodoItem todo) {
    setState(() {
      _todoItems.remove(todo);
      _saveTodos();
    });
  }

  void _saveTodos() async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setStringList('todos', _todoItems.map((e) => e.title).toList());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todoItems.length,
              itemBuilder: (context, index) {
                final todo = _todoItems[index];
                return ListTile(
                  leading: Checkbox(
                    value: todo.done,
                    onChanged: (value) => _toggleTodo(todo),
                  ),
                  title: Text(todo.title),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => _removeTodo(todo),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                labelText: 'Add new todo',
                suffixIcon: IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    final title = TextEditingController().text;
                    if (title.isNotEmpty) {
                      _addTodo(title);
                    }
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

使用SharedPreferences读取数据

在initState方法中调用_loadTodos方法，从SharedPreferences中读取数据并初始化列表。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

HUWWW

手记
篇

粉丝

37

获赞与收藏

133

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Flutter列表组件项目实战：从入门到简单应用

步骤如下：

使用命令行创建项目

使用IDE创建项目

运行项目

StatelessWidget示例

StatefulWidget示例

ListView

GridView

ListView示例

基本示例

ListView.builder示例

列表项点击示例

基本示例

GridView.builder示例

灵活布局示例

FutureBuilder示例

列表项增删改查示例

列表刷新示例

布局设计示例

完整示例代码

使用SharedPreferences保存数据

使用SharedPreferences读取数据

阅读免费教程