Flutter中的Widget、State和BuildContext的作用和区别

发布于 2 个月前 作者 itying888 40 次浏览 最后一次编辑是 2 个月前 来自 分享

Flutter中的Widget、State和BuildContext的作用和区别如下：

Widget：Widget是构成Flutter应用程序用户界面的基本元素。它可以是一个按钮、文本、图片等

State：在Flutter中，State用于管理有状态Widget的状态。当有状态Widget的状态发生变化时，Flutter框架会调用其build方法来更新用户界面。State的生命周期方法包括： initState：在State对象创建时调用，用于初始化状态。 didChangeDependencies：在State对象的依赖关系发生变化时调用，例如数据源的更改。 build：在Widget的状态发生变化时调用，用于构建新的用户界面。 didUpdateWidget：在Widget更新时调用，例如父Widget的属性发生变化。 deactivate：在State对象失去关联的Widget时调用。 dispose：在State对象被销毁时调用，用于释放资源。

BuildContext：BuildContext是Flutter框架在构建Widget时提供的上下文信息。它包含当前构建过程中的相关信息，例如Widget的父容器、主题、布局约束等

以下是build方法的基本结构和用法：

Widget build(BuildContext context) {
  // 在这里构建和返回Widget树
}
有状态组件（Stateful Widgets）的 build 方法
class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    // 在这里构建和返回Widget树
  }
}

无状态组件（Stateless Widgets）的 build 方法 对于无状态组件，build方法通常位于组件类的直接内部。无状态组件不包含可变状态，因此build方法可以直接在组件类内部定义。

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 在这里构建和返回Widget树
  }
}

build方法接受一个BuildContext对象作为参数。BuildContext是一个用于获取与构建上下文相关信息的对象，例如主题、媒体查询信息等。它是构建过程中的上下文环境。

位置信息：获取屏幕的方向

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
// 在这里构建和返回Widget树
print(MediaQuery.of(context).orientation);
...
  }
}

主题信息：BuildContext允许你访问应用程序的主题数据。通过Theme.of(context)，可以获取当前上下文中的主题，从而根据主题数据自定义 Widget 的外观。

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

final ThemeData theme = Theme.of(context);

...
  }
}





class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
return Text(
          "我是一个标题",
          style: Theme.of(context).textTheme.labelLarge,
)
  }
}

媒体查询信息：BuildContext还允许执行媒体查询，以获取有关设备屏幕的信息，如屏幕宽度、高度和方向。这对于创建响应式布局非常有用。

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {

// 在这里构建和返回Widget树
final MediaQueryData mediaQuery = MediaQuery.of(context);
final double screenWidth = mediaQuery.size.width;
final double screenHeight = mediaQuery.size.height;
final Orientation orientation = mediaQuery.orientation;

....
  }
}

Dart Flutter教程在线学习地址：https://www.bilibili.com/video/BV1S4411E7LY?p

Dart Flutter教程视频+课件+源码网盘下载地址：https://pan.baidu.com/s/1iaLGIyR9UmyJyHDGH6hepg 提取码：abcd

Flutter仿小米商城项目实战地址：https://www.itying.com/goods-1176.html

Flutter+Go_Router+Fluent_Ui仿阿里网盘桌面软件开发跨平台实战：https://www.itying.com/goods-1183.html

回到顶部