【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()
      );
  }
}

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

相关推荐
xw539 分钟前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler42 分钟前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !1 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖1 小时前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖1 小时前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端
Jackson__1 小时前
使用 ICE PKG 开发并发布支持多场景引用的 NPM 包
前端
饺子不放糖1 小时前
前端错误监控与异常处理:构建健壮的Web应用
前端
cos1 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
饺子不放糖1 小时前
CSS的float布局,让我怀疑人生
前端
阳光是sunny1 小时前
走进AI(1):细说RAG、MCP、Agent、Function Call
前端·ai编程