Flutter自编教程

Flutter的核心设计思想便是“一切皆Widget”

1、应用入口main函数，runApp功能是启动Flutter应用，它接受一个 Widget参数

void main() {
  runApp(const MyApp());
}

2、MyApp

继承了 StatelessWidget类，可以看出应用本身也是一个widget。widget我的理解是，有点类型安卓的view/viewgroup。安卓调用draw方法绘制布局，flutter调用widget的build方法绘制布局。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //应用名称
      title: '饮食记录',
      theme: ThemeData(
        //应用主题：紫色
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      //应用首页
      home: const MyHomePage(title: '饮食记录'),
    );
  }
}

　　3.

首页MyHomePage
继承自StatefulWidget类，表示它是一个有状态的组件。可以简单理解为StatefulWidget【有状态】可以变化内容，而StatelessWidget【无状态】不可以变化内容。

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
       .......
}

　　

Stateful widget 【有状态】可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Stateless widget 是不可变的。
Stateful widget【有状态】 至少由两个类组成：

1. 一个StatefulWidget类。
2. 一个 State类； StatefulWidget类本身是不变的，但是State类中持有的状态在 widget 生命周期中可能会发生变化。
   _MyHomePageState类是MyHomePage类对应的状态类。看到这里，读者可能已经发现：和MyApp 类不同， MyHomePage类中并没有build方法，取而代之的是，build方法被挪到了_MyHomePageState方法中

_MyHomePageState
有一个需要变化的_counter变量，通过setState进行内容的变化，其实类似于livedata中，如果需要改变值，用livedata的setvalue。这里是setState。调用setState会通知 Flutter 框架，有状态发生了改变，Flutter 框架收到通知后，会执行 build 方法来根据新的状态重新构建界面（有点类似调用invalid重新调用draw绘制页面）。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
     //具体代码稍后再贴，是个UI界面
  }
}

　　

上面build方法，构建UI界面
下面就是5中稍后再贴的代码啦。Scaffold是Material 库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕 widget 树（后同“组件树”或“部件树”）的body属性，组件树可以很复杂。
简单理解就是Scaffold是官方提供的一个自定义 viewGroup，这个viewGroup中有导航栏、标题等一些布局，可以通过方法更改布局样式。大家按着command键，就可以进入相应的源码进行查看哦。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//设置appbar样式
        backgroundColor: Theme
            .of(context)
            .colorScheme
            .inversePrimary,
          title: Text(widget.title),
      ),
      body: Center( //center用于居中
        child: Column(//将其所有子组件沿屏幕垂直方向依次排列
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[//子view
            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),
      ),
    );
  }