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

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

相关推荐
wyzqhhhh32 分钟前
less和sass
前端·less·sass
Nan_Shu_6142 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel3 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始3 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible4 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫4 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评4 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner4 小时前
【html】canvas实现一个时钟
前端·html
林烈涛4 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99995 小时前
Unocss
开发语言·前端