Flutter StatefulWidget的相关应用

最新推荐文章于 2022-07-07 16:36:14 发布

清风99w

最新推荐文章于 2022-07-07 16:36:14 发布

阅读量994

点赞数 2

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_45425105/article/details/111181273

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

本文通过实例展示了在Flutter中如何使用无状态和有状态组件来实现按钮交互。首先，我们创建了一个无状态组件，点击按钮虽然在控制台中更新了数字，但界面上未显示变化。接着，我们转换为有状态组件，实现了当按钮被点击时，界面上的数字会随之增加，从而展示了有状态组件在UI更新上的作用。

摘要由CSDN通过智能技术生成

我们最常见的交互就是按钮组件，chexkbox , radio等
我们今天就使用按钮完成一个简单的交互
点击按钮，数字加1

为了加深印象，我们先用无状态组件顶实现一个按钮，看看点击按钮会发生什么变化
无状态的代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: StafulDemo(), //调用函数
    ));
  }
}

class StafulDemo extends StatelessWidget {
  int countNum = 0;
  //const StafulDemo({Key key}) : super(key: key);
//把代码抽离成无状态的
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("${this.countNum}"),
        SizedBox(height: 10),
        RaisedButton(
            child: Text("button"),
            onPressed: () {
              this.countNum++;
              print(this.countNum);
            })
      ],
    );
  }
}

代码可以直接复制进main.dart去运行，我们会发现点击按钮，页面没有变化，但是我们的终端会有变化，这就是无状态组件产生的效果。而我们现在需要让它改变，所以就有了有状态组件

以下是代码实现

class xxx extends StatefulWidget {
  @override
  _xxx createState() => _xxxState();
}

class _xxxxState extends State<StafulDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
    
    );
  }
}

此处的xxx是类名

具体的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: StafulDemo(), //调用函数
    ));
  }
}

class StafulDemo extends StatefulWidget {
  StafulDemo({Key key}) : super(key: key);
  _StafulDemoState createState() => _StafulDemoState();
}

class _StafulDemoState extends State<StafulDemo> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Chip(
          label: Text("${this.countNum}"),
        ),
        SizedBox(height: 10),
        RaisedButton(
            child: Text("按钮"),
            onPressed: () {
              setState(() {
                this.countNum++;
              });
            })
      ],
    );
  }
}

在这里插入图片描述
当我们点击按钮时，上面的数字就会增加