Flutter 中的 StatelessWidget 基本使用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

关于 Widget 复杂的嵌套逻辑

Flutter 的整个开发过程中就是形成一个 Widget 树，所以嵌套是很正常的。在实际开发中，面对复杂的逻辑嵌套的层级会越来越复杂，当嵌套太多时，代码结构不容易阅读。因此，我们需要将其封装成不同的 Widget

void main() {
  runApp(
      MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Dart"),
          ),
          body: const Center(
            child: Text(
              "Hello Dart",
              textDirection: TextDirection.ltr,
              style: (TextStyle(fontSize: 30, color: Colors.orange)),
            ),
          )
        ),
      )
  );
}

Widget 的分类

在 Flutter 中，Widget 分为

• 有状态的 Widget（StatefulWidget）

  在运行过程中，Widget 的状态或数据需要发生改变

• 无状态的 Widget（StatelessWidget）

  Widget 的状态或数据是确定的，其内容不会发生改变

Widget 的封装

在 Flutter 开发中，可以通过继承 StatelessWidget 或 StatefulWidget 来自定义的 Widget 类

// 无状态的 Widget
class MyHomePage extends StatelessWidget {
  
  
}


// 有状态的 Widget
class MyHomePage extends StatefulWidget {
  
}

关于 build() 方法

• 自定义的 Widget 继承自 StatelessWidget，那么在自定义的 Widget 中必须重写 build() 方法。build() 方法就是告诉 Flutter， Widget 要渲染什么组件

  class MyAPP extends StatelessWidget {
      const MyAPP({Key? key}) : super(key: key);
      @override
      Widget build(BuildContext context) {
          return const Text("dart");
      }
  }
  

• build() 方法不会主动去执行，当我们使用的数据发送改变时， build() 方法就被重新执行。build() 方法触发的方式有以下几种

  • 当 StatelessWidget 第一次被创建时
  • 当父类 Widget 发生改变时，子类 Widget 会被重新刷新
  • Widget依赖的 InheritedWidget 的一些数据，InheritedWidget 数据发生改变时

通过 Widget 的封装重构上述示例

import 'package:flutter/material.dart';

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

class MyAPP extends StatelessWidget {
    const MyAPP({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return const MaterialApp(home: MyHomePage());
    }
}

class MyHomePage extends StatelessWidget {
    const MyHomePage({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text("Hello Dart"),
            ),
            body: const BodyContent()
        );
    }
}

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

    @override
    Widget build(BuildContext context) {
        return const Center(
            child: Text(
                "Hello Dart",
                textDirection: TextDirection.ltr,
                style: (TextStyle(fontSize: 30, color: Colors.orange)),
            )
        );
    }
}

示例效果：