前端学习-flutter学习-002-计数器示例学习

学习参考链接

拆解代码学习

• 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. 根组件
  @override
  Widget 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;

  @override
  State<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 树渲染到设备屏幕上
  @override
  Widget 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，最终显示在设备屏幕上。