美文网首页
flutter三基础框架初识

flutter三基础框架初识

作者: crossroads | 来源:发表于2024-05-10 11:15 被阅读0次

main.dart

  1. 应用入口main函数，runApp功能是启动Flutter应用，它接受一个 Widget参数
void main() {
  runApp(const MyApp());
}
  1. 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: '饮食记录'),
    );
  }
}
  1. 首页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就知道了。

  1. _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界面
  }
}

6.上面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),
      ),
    );
  }

后记

这里就大致的了解一下基础框架，下一节开始学习基础页面搭建。
主打一个快速上手，所以那些flutter绘制是由谁来完成等的原理这里都略过了。感兴趣的可以看https://book.flutterchina.club/chapter2/flutter_widget_intro.html#_2-2-2-widget-接口的第二章内容。

相关文章