flutter动态布局StatefulWidget

最新推荐文章于 2025-04-03 12:26:20 发布

头上的阿飘

最新推荐文章于 2025-04-03 12:26:20 发布

阅读量2.5k

点赞数

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/bin2277904333/article/details/99483767

版权

flutter 专栏收录该内容

14 篇文章

订阅专栏

Flutter StatefulWidget 是一种有状态的组件，适用于数据更新时页面的动态刷新。创建时需继承StatefulWidget，重写createState方法，而状态类中则需要重写build方法。在_state类中使用initState方法加载数据，并通过setState((){})更新页面。命名规范是前加下划线，后加'State'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

StatefulWidget：有状态的widget

数据更新后使用这个代码更新页面

setState(() { widget.posterList = posterList; });

如何使用：

继承StatefulWidget类的创建

普通的类需要重写build方法，但是继承StatefulWidget的类，重写createState方法就可以了，而且这个类最好只有这一个方法（不包括构造方法、和成员变量），把逻辑放到状态类里。

createState方法的返回值是状态类

状态类的创建：

这里面需要重写build方法，就相当于把上面类的方法放到这个类里面

命名规则：

前面加下划线，后面加State，例如：_PosterShowState

需要重写的方法

build：

就相当于静态类中的build方法，是一些组件和样式

如果报空指针之类的错误可以再这里面return组件之前初始化一下数据

initState：

放数据加载的方法。

加载数据的方法里面需要用 setState((){}) 来更新页面

加载数据的方法最好能一次性把数据赋值完成，因为他每变化一次就会刷新一次页面，如果不能一次赋值，就写一个可以一次赋值的方法

官方的例子

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}