学习参考链接
拆解代码学习
- Material 是一种标准的移动端和web端的视觉设计语言， Flutter 默认提供了一套丰富的 Material 风格的UI组件。
// 导入了 Material UI 组件库。
import 'package:flutter/material.dart';- main 函数为应用程序的入口。main 函数中调用了runApp 方法，它的功能是启动Flutter应用
// void main() {
// runApp(const MyApp());
// }void main() => runApp(const MyApp());
- 应用结构
- 关于什么是BuildContext，这篇文章很好，但是我还没看懂
- MaterialApp 是Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等
class MyApp extends StatelessWidget {const MyApp({super.key});// This widget is the root of your application. 根组件@overrideWidget build(BuildContext context) {// MaterialApp 是Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),useMaterial3: true,),//应用首页路由 home: const MyHomePage(title: 'Flutter Demo Home Page'),);}
}- 首页
- MyHomePage 是应用的首页，它继承自StatefulWidget类，表示它是一个有状态的组件（Stateful widget
- Stateful widget 可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Stateless widget 是不可变的
- Stateful widget 至少由两个类组成：一个StatefulWidget类。一个 State类； StatefulWidget类本身是不变的，但是State类中持有的状态在 widget 生命周期中可能会发生变化。
class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});// This widget is the home page of your application. It is stateful, meaning// that it has a State object (defined below) that contains fields that affect// how it looks.// This class is the configuration for the state. It holds the values (in this// case the title) provided by the parent (in this case the App widget) and// used by the build method of the State. Fields in a Widget subclass are// always marked "final".final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}- _MyHomePageState类是MyHomePage类对应的状态类。MyHomePage类中并没有build方法，build方法被挪到了_MyHomePageState
class _MyHomePageState extends State<MyHomePage> {// 定义一个 _counter 状态int _counter = 0;// 当按钮点击时，会调用此函数，该函数的作用是先自增_counter，然后调用setState 方法。// setState方法的作用是通知 Flutter 框架，有状态发生了改变，Flutter 框架收到通知后，// 会执行 build 方法来根据新的状态重新构建界面void _incrementCounter() {setState(() {// If we changed_counter without calling setState(), then the build method would not be// called again, and so nothing would appear to happen._counter++;});}// 构建UI界面的逻辑在 build 方法中，当MyHomePage第一次创建时，// _MyHomePageState类会被创建，当初始化完成后，Flutter框架会调用// widget 的build方法来构建 widget 树，最终将 widget 树渲染到设备屏幕上@overrideWidget build(BuildContext context) {// This method is rerun every time setState is called, for instance as done// by the _incrementCounter method above.// Scaffold是 Material 库中提供的页面脚手架return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}
当右下角的floatingActionButton按钮被点击之后，会调用_incrementCounter方法。在_incrementCounter方法中，首先会自增_counter计数器（状态），然后setState会通知 Flutter 框架状态发生变化，接着，Flutter 框架会调用build方法以新的状态重新构建UI，最终显示在设备屏幕上。
