Flutter学习案例分享-计数器小案例

摘要：虽然Widget是开发人员创建和管理的，但Flutter框架会并行构建和管理另外两棵树，称为元素树和渲染对象树。这三种树用于构建用户画面（UI）并决定何时刷新他们。StatelessWidget这种widget不需要可变状态。最适合用于描述UI中永不可改的部分

Widget,Element 和 RenderObject 类型

虽然Widget是开发人员创建和管理的，但Flutter框架会并行构建和管理另外两棵树，称为元素树和渲染对象树。这三种树用于构建用户画面（UI）并决定何时刷新他们。StatelessWidget这种widget不需要可变状态。最适合用于描述UI中永不可改的部分。StatefulWidget这种widget具有可变状态，一般在开发者需要控制widget的生命周期或动态内容时使用。StatefulWidget本身是不可变的，但它的状态是可变的，并且由一个单独的State对象表示。一个小计数器案例（结构很简单，小伙伴们可以根据个人的习惯来创建文件目录）。在lib目录下创建一个counter目录，在该目录下创建一个counter_app_body文件。

首先修改main文件代码

void main {runApp(const EnhancedCounterApp);}class EnhancedCounterApp extends StatelessWidget {const EnhancedCounterApp({super.key});@overrideWidget build(BuildContext context) {return const MaterialApp(home: CounterAppBody,);}}

创建新目录和文件

在counter_app_body创建一个有状态的Widget.然后在counter目录下在添加一个widget目录，并在该目录下创建app_title文件来显示程序的标题.class AppTitle extends StatelessWidget {const AppTitle({super.key});@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(120),child: Row(mainAxisSize: MainAxisSize.min,children: [Icon(Icons.remove,color: Colors.redAccent,),Text('计数器App',style: TextStyle(color: Colors.black,fontSize: 20,),),Icon(Icons.add,color: Colors.lightGreen,)],),);}}

widget目录下创建文件

在widget目录下创建history_widget文件，它用来显示计数器下方的滚动列表。这样做可以提高可读性和UI部分的分离。在有状态Widget需要初始化或是需要更新时需要使用State类下的一些方法来控制。本程序中使用到了didUpdateWidget来更新添加计数时更新列表的状态。当我们点击+时才会更新列表，当点击-时，只减少计数器的值，列表不变。import 'package:flutter/material.dart';class HistoryWidget extends StatefulWidget {//计数器历史final List increasesHistory;const HistoryWidget({super.key, required this.increasesHistory});@overrideState createState => _HistoryWidgetState;}class _HistoryWidgetState extends State {//滚动视图控制器final controller = ScrollController;//缓存列表late ListView list = buildList;//构建列表ListView buildList {return ListView.separated(key: const Key('历史列表'),controller: controller,scrollDirection: Axis.horizontal,itemCount: widget.increasesHistory.length,itemBuilder: (_, index) {return Card(elevation: 4,shadowColor: Colors.blueAccent,child: SizedBox(width: 40,height: 40,child: Center(child: Text('${widget.increasesHistory[index]}'),),),);},separatorBuilder: (_, __) => const SizedBox(width: 10),);}@overridevoid didUpdateWidget(covariant HistoryWidget oldWidget) {super.didUpdateWidget(oldWidget);if (widget.increasesHistory.length != oldWidget.increasesHistory.length) {// 更新列表list = buildList;// 移动到尾部controller.animateTo(controller.position.maxScrollExtent + 50 + 10,duration: const Duration(milliseconds: 400),curve: Curves.ease,);}}@overridevoid dispose {controller.dispose;super.dispose;}@overrideWidget build(BuildContext context) {return Column(mainAxisSize: MainAxisSize.min,children: [// 标题const Text('计数器列表',style: TextStyle(fontSize: 20,),),// 实际的列表Flexible(child: Padding(padding: const EdgeInsets.symmetric(horizontal: 40,vertical: 15,),child: SizedBox(height: 40,child: list,),),),],);}}

更新主页面

import 'package:counter_app/counter/widgets/app_title.dart';import 'package:counter_app/counter/widgets/history_widget.dart';import 'package:flutter/material.dart';class CounterAppBody extends StatefulWidget {const CounterAppBody({super.key});@overrideState createState => _CounterAppBodyState;}class _CounterAppBodyState extends State {//计数器变量int count = 0;// 跟踪当按下 '+1' 时计数器状态的变化List incrementHistory = ;//将计数器增加1void increment {setState( {count++;incrementHistory = List.from(incrementHistory)..add(count);});}//将计数器减少1void decrement {setState( {count--;});}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisSize: MainAxisSize.min,children: [const AppTitle,//添加两个按钮和计数器文本Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,),onPressed: decrement,child: const Text('-',style: TextStyle(fontSize: 30),),),const SizedBox(width: 16),ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent,),onPressed: increment,child: const Text('+', style: TextStyle(fontSize: 30)),),],),HistoryWidget(increasesHistory: incrementHistory,),],),),);}}