声明式UI：Flutter语法简单总结

此文档为了对比各个声明式UI编程语法，避免混淆。

这是最简单的一个 Hello World

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Material主题有状态的计数 Hello World

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.redAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  //每个有状态的小部件（Stateful Widget）都需要一个相应的状态对象（State Object）
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// _MyHomePageState下划线表示该类时私有的
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    // `Scaffold`小部件为开发者提供了一个包含导航栏、抽屉菜单、底部导航栏和浮动操作按钮等。
    // 以下是一些`Scaffold`小部件提供的常见功能：
    // 1. AppBar（导航栏）。
    // 2. Body（正文）：可以放置应用程序的主要内容。
    // 3. Drawer（抽屉菜单）：可以在屏幕左侧显示一个抽屉菜单。
    // 4. BottomNavigationBar（底部导航栏）：可以在屏幕底部显示一个导航栏。
    // 5. FloatingActionButton（浮动操作按钮）：可以显示一个悬浮按钮。
    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(
              '点击按钮，数字自增:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

TODO