flutter学习之旅 -有状态的组件(StatefulWidget)

最新推荐文章于 2025-08-17 09:59:49 发布

结城明日奈是我老婆

最新推荐文章于 2025-08-17 09:59:49 发布

阅读量629

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/yasinawolaopo/article/details/130532142

fluuter学习专栏收录该内容

17 篇文章

订阅专栏

文章介绍了在Flutter中使用StatefulWidget来管理可变状态，例如实现数字num的增加功能，并讨论了final和const关键字在定义常量数组时的区别。示例代码展示了如何创建有状态组件以及添加按钮来改变页面数据显示。

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

文章目录

我们重建一个项目

flutter create 项目名

我们会看到
class MyHomePage extends StatefulWidget{...}

在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget

StatelessWidget是无状态组件，状态不可改变的widget
StatefulWidget是有状态的组件，持有的状态可能在widget生命周期改变

我们要想改变页面中的数据的话这个时候我们就要用到StatefulWidget

StatefulWidget格式

//有状态组件
class HomePage extends StatefulWidget {
  const HomePage ({super.key});

  @override
  State<HomePage> createState() => _MyNum();//要实现createState方法
}

class _MyNum extends State<HomePage> {//要继承以上的类型
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

实现num增加

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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

//有状态组件
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _MyNum();
}

class _MyNum extends State<HomePage> {
  int _numData = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "$_numData",
            style: Theme.of(context).textTheme.headline2,
          ),
          const SizedBox(height: 60),
          ElevatedButton(
              onPressed: () {
                setState(() {
                  _numData++;
                });
              },
              child: const Text("+1"))
        ],
      ),
    );
  }
}

final

final和const定义的是常量，常量的值不可改变

const必须声明的时候赋值; final可以先声明后赋值,也可以声明赋值

final定义数组

void main(){
  final List l=[];
  l.add(12);
  l.add(22);
}

以上的写法是被允许的，因为是往数组里添加数据而不是赋值