【Flutter3.8x】flutter从入门到实战基础教程(四):自定义实现一个自增的StatefulWidget组件

fluttet中实现一个自定义的StatefulWidget组件,可以在数据变化后,把最新的页面效果展示给客户

实现效果

实现代码

pages文件夹下新加一个counter_page.dart文件

dart 复制代码
class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

_CounterPageState类的实现

dart 复制代码
class _CounterPageState extends State<CounterPage> {

  int _counter = 0;
  void _addCount() {

    setState(() {
      _counter++;
    });
   
  }
  void _decCount() {
    setState(() {
      _counter--;
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('计数器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You have pushed the button this many times:'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _decCount,
                  // 减号图标Icons
                  style: const ButtonStyle(
                    backgroundColor: WidgetStatePropertyAll<Color>(Colors.red),
                  ),
                  child: Text('-',style: TextStyle(color: Colors.white),),
                ),
                Text('$_counter'),
                ElevatedButton(
                  onPressed: _addCount,
                  child: Icon(Icons.add),
                )
              ],
            )
          ],
        ),
      )
      
    );
  }
}

_counter 是内部的状态变量,_decCount_addCount是对应按钮的点击事件

使用setState来实现数据的变化,这里有点类似于react的class组件的实现

在main.dart中使用这个组件

dart 复制代码
import 'package:flutter/material.dart';
import 'package:flutter_app_01/pages/counter_page.dart';
// import 'package:flutter_app_01/pages/msg_page.dart';

void main() =>  runApp(const MyWidget());
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // debugShowCheckedModeBanner:false,
      title:"个人中心",
      // home: MyHomePage(),
      // home:MessagePage()
      home: CounterPage()
      );
  }
}

这样我们就实现了一个自定义组件

相关推荐
gAlAxy...21 小时前
IntelliJ IDEA 四种项目构建:从普通 Java 到 Maven Web 项目
前端·firefox
my一阁21 小时前
2025-web集群-问题总结
前端·arm开发·数据库·nginx·负载均衡·web
会飞的小妖21 小时前
个人博客系统(十一、前端-简短的配置)
前端
念念不忘 必有回响1 天前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
JIngJaneIL1 天前
篮球论坛|基于SprinBoot+vue的篮球论坛系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·篮球论坛系统
程序猿阿伟1 天前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
fruge1 天前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
消失的旧时光-19431 天前
Flutter 异步体系终章:FutureBuilder 与 StreamBuilder 架构优化指南
flutter·架构
sean1 天前
开发一个自己的 claude code
前端·后端·ai编程
用户21411832636021 天前
dify案例分享-用 Dify 一键生成教学动画 HTML!AI 助力,3 分钟搞定专业级课件
前端