前端学习-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());
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,最终显示在设备屏幕上。

posted @   ayubene  阅读(18)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示