Flutter控件及页面介绍

我是火山呀

已于 2023-12-20 13:57:52 修改

阅读量1.4k

点赞数

分类专栏： Flutter 文章标签：学习 flutter android

于 2022-05-05 00:11:34 首次发布

本文链接：https://blog.csdn.net/qq_43491495/article/details/124574436

版权

Flutter 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Fllutter控件及页面

1. 无状态控件（StatelessWidget）
2. 有状态控件（StatefulWidget）
3. 常用控件
4. 页面

Flutter是跨平台的 UI框架，主要解决的就是界面的跨平台。
一切显示都是 widget,widget是所有控件的基础。
Flutter每个页面都是一帧。

1. 无状态控件（StatelessWidget）

控件保持在这一帧。
继承StatelessWidget，在buiold方法内返回一个嵌套好的布局渲染。
继承自widget类，重写createElement方法，创建出StatelessElement。

2. 有状态控件（StatefulWidget）

2.1 控件数据更新，构建新的widget。

继承自widget类，重写createElement方法，创建出StatefulElement。
并新增方法 createState()；

2.2 State

实现了数据的跨帧保存和恢复；在widget构建的时候可以被读取；在widget生命周期中发生改变；一般一个StatefulWidget类对应一个State类。

setState（{}） 方法触发界面更新
{} 中就是要改变的数据。

示例可以参考新建Flutter项目默认的计时器项目，截取了部分代码如下：


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

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

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

  void _incrementCounter() {
  	//界面刷新时触发修改的数据。计时器加1
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

2.2.1控件State生命周期

State生命周期图：
下面是State生命周期回调的方法：

initState： 当 widget 第一次插入到 widget 树时会被调用；每一个State对象，Flutter 框架只会调用一次该回调，通常在该回调中做一些一次性的操作。

didChangeDependencies()： 当State对象的依赖发生变化时会被调用；典型的场景是当系统语言 Locale 或应用主题改变时，Flutter 框架会通知 widget 调用此回调。组件第一次被创建后挂载的时候（包括重创建）对应的didChangeDependencies也会被调用。

build()： 它主要是用于构建 widget 子树的，会在如下场景被调用：

在调用initState()之后。
在调用didUpdateWidget()之后。
在调用setState()之后。
在调用didChangeDependencies()之后。
在State对象从树中一个位置移除后（会调用deactivate）又重新插入到树的其它位置之后。

reassemble()： 此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。

didUpdateWidget ()： 在 widget 重新构建时，Flutter 框架会调用widget.canUpdate来检测 widget 树中同一位置的新旧节点，然后决定是否需要更新，如果widget.canUpdate返回true则会调用此回调。widget.canUpdate会在新旧 widget 的 key 和 runtimeType 同时相等时会返回true，也就是说在在新旧 widget 的key和runtimeType同时相等时didUpdateWidget()就会被调用。

deactivate()： 当 State 对象从树中被移除时，会调用此回调。

dispose()： 当 State 对象从树中被永久移除时调用；通常在此回调中释放资源。

2.2.2 获取State对象

因为Stateful的具体逻辑都在State中，所以很多时候我们都需要获取State来执行调用一些方法。那么获取State对象有什么方式呢？

通过context
context.findAncestorStateOfType()；
可以通过widget树查找到到指定类型的StatefulWidget的State对象。
但是，如果StatefulWidget希望自己的状态是私有的，而我们通过这个方法依然可以获取，这就使得私有变得没有意义了。所以，后续Flutter开发中有了一个默认的约定：如果StatefulWidget希望暴露状态，那就提供一个of的静态方法来获取State对象。否则就不提供。
通过GlobalKey
1. 给目标StatefulWidget添加GlobalKey
2. 通过GlobalKey获取State对象。

GlobalKey是能在整个App中引用Element的机制。如果一个widget设置了GlobalKey，那么我们就能用globalKey.currentWidget来获取该widget对象；能用globalKey.currentElement来获取widget的element对象；如果widget是StatefulWidget，那么可以用globalKey.currentState来获取state对象

PS：
5. GlobalKey开销比较大，尽量避免使用。
6. GlobalKey必须是唯一的，不能重复。

3. 常用控件

Flutter中有30多种内置的控件和布局，而且很多控件的职责其实非常单一。

3.1 container

container是最常用的布局，是由其他好几个默认的widget组成的模板。
支持padding，margin，color，width，height等属性。

3.2 Padding

用来设置padding的控件。职责非常单一。
同类的还有Center（设置居中）,Align等（可参考后续配图）。

3.3 Column和Row

最常见的横竖布局。

3.4 常用控件

分类图待补充

4. 页面

除了上面描述的常用的控件之外，Flutter还有用于交互显示的Widget。如MaterialApp（App顶层主页入口），Scaffold（用于承载一般用户界面，脚手架），Appbar，Text，Image等。

4.1 路由跳转（Navigator）

4.2 命名路由跳转

通过MaterialApp的routes参数配置路由表

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home对应的其实就是路由为“/”的页面
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      routes: {
        "home":(context){
          return HomePage();
        }
      },
    );
  }
}

//跳转方式
Navigator.pushNamed(context, "/home");
//跳转携带参数
Navigator.pushNamed(context, "/home", arguments: <String, String>{
	"date":"20220504",
},);
//跳转新页面并替换新页面
Navigator.pushReplacementNamed(context, "/home");
//跳转新页面，并关闭指定路由之前的所有页面
Navigator.pushNamedAndRemoveUntil(context, "/home",ModalRoute.withName("/"));

4.3 直接使用Route跳转

需要手动构建Route参数信息，然后交给Navigator实现调整

Navigator.push(context, MaterialPageRoute(builder: (context) => NotifyPage()));

4.4 使用onGenerateRoute跳转

利用onGenerateRoute方法在MateriaApp中增加特殊定制处理的路由跳转。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      onGenerateRoute: (RouteSettings settings){
        WidgetBuilder builder;
        switch(settings.name){
          case "signup/personal_info":
            builder = (BuildContext _) => CollectPersonalInfoPage();
            break;
          case "signup/choose_credentials":
            builder = (BuildContext _) => ChooseCredentialsPage();
            return CupertinoPageRoute(builder: builder,settings: settings);
          default:
            throw Exception("invalid route");
        }
        return MaterialPageRoute(builder: builder,settings: settings);
      },
    );
  }
}