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

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

相关推荐
Stringzhua2 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
万少2 小时前
可可图片编辑 HarmonyOS 上架应用分享
前端·harmonyos
你的人类朋友2 小时前
git常见操作整理(持续更新)
前端·git·后端
无羡仙2 小时前
Webpack 核心实战:从零搭建支持热更新与 Babel 转译的现代前端环境
前端·webpack·前端框架
你的人类朋友3 小时前
git中的Fast-Forward是什么?
前端·git·后端
初遇你时动了情3 小时前
uniapp vue3 ts自定义底部 tabbar菜单
前端·javascript·uni-app
JarvanMo3 小时前
天塌了?Flutter工程总监跑去苹果了?
前端
烛阴4 小时前
掌握 TypeScript 的边界:any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript
Jerry5 小时前
迁移到 Jetpack Compose
前端
FFF-X5 小时前
前端无感刷新 Token 的 Axios 封装方案
前端