Flutter开发 StatelessWidget与StatefulWidget基本了解

来来走走2025-08-05 14:14

StatelessWidget

StatelessWidget应用于Widget不会再运行时发生变化的场景。

dart 复制代码

void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("标题栏")),
        body: Center(child: Text("2222222")),
      ),
    );
  }
}

StatefulWidget

应用于Widget会在运行时发生变化的场景。例如，从网路请求数据进行展示。

1.StatefulWidget要与State一起使用，StatefulWidget的createState方法，要返回一个State。

2.更新数据要setState方法

下面这个例子，点击button，修改文本内容。

dart 复制代码

void main() {
  runApp(MyPage());
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FulPage(),
    );
  }
}

class FulPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyState();
  }
}

class MyState extends State {
  String info = "默认文字";


  void  showInfo(){

    setState(() {

      info ="变变变";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("修改文字")),
      body: Text(info),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

          showInfo();
        },
        child: Icon(Icons.print),
      ),
    );
  }
}