您现在的位置是：首页 >技术交流 >flutter学习之旅 -有状态的组件(StatefulWidget)网站首页技术交流

我们重建一个项目

flutter create 项目名

我们会看到

在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);
}

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