14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

可莉
• 阅读 746
/**
 * Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据
 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget
 * StatelessWidget是无状态组件,状态不可变得widget
 * StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变。如果我们想
 * 改变页面中的数据化的这个时候就需要用到StatefulWidget
*/

14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义组件'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Stack结合align实现布局:
    return HomePage();
  }
}

//自定义有状态组件:
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int countNum=0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(height: 200),
        Chip(label: Text('${this.countNum}')),
        SizedBox(height: 20),
        RaisedButton(
          child: Text('按钮'),
          onPressed: (){
            setState(() { //只有有状态的组件里面才有
              this.countNum++;
            });
          },
        )
      ],
    );
  }
}

demo2

14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

main.dart

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义组件'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Stack结合align实现布局:
    return HomePage();
  }
}

//自定义有状态组件:
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List list=new List();
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children:this.list.map((value){
            return ListTile(
              title: Text(value),
            );
          }).toList()
        ),
        RaisedButton(
          child: Text('按钮'),
          onPressed: (){
            setState(() {
              this.list.add('新增数据1');
              this.list.add('新增数据2');
            });
          },
        )
      ],
    );
  }
}
点赞
收藏
评论区
推荐文章
可莉 可莉
3年前
了解Vuex状态管理模式
1Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢?vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
浩浩 浩浩
3年前
【Flutter实战】布局类组件简介
4.1布局类组件简介布局类组件都会包含一个或多个子组件,不同的布局类组件对子组件排版(layout)方式不同。我们在前面说过Element树才是最终的绘制树,Element树是通过Widget树来创建的(通过Widget.createElement()),Widget其实就是Element的配置数据。在Flutter中,根据Widget是否
Souleigh ✨ Souleigh ✨
4年前
React Hooks 快速上手
ReactHook快速上手一、Hook简介1.1Hook历史在ReactHook出现之前的版本中,组件主要分为两种:函数式组件和类组件。其中,函数式组件通常只考虑负责UI的渲染,没有自身的状态也没有业务逻辑代码,是一个纯函数。而类组件则不同,类组件有自己的内部
Stella981 Stella981
3年前
Flutter 中的组件绘制完成监听、组件生命周期和APP生命周期
Flutter的生命周期说到Flutter的生命周期,其实就是说StatefulWidget的生命周期,因为StatelessWidget是静态控件。StatefulWidget,通过借助于State对象,处理状态变化,并体现在UI上。这些阶段,就涵盖了一个组件从加载到卸载的全过程,即生命周期。
Stella981 Stella981
3年前
JetPack之ViewModel最新源码详细分析
本文会基于最新版ViewModel使用方法与源码进行详细分析,从注册到实现ViewModel界面数据如何保存与管理全部涉及。\\简介:\\ViewModel是JetPack系列库之一,它用来对组件的界面数据进行管理,且当组件的状态发生改变时数据依然留存。优点:1.当所依赖组件的状态发生改变时,例如屏幕旋转等,界面数据不会发
Stella981 Stella981
3年前
React.js 时间组件 + 组件生命周期(更新模拟)
React是用于构建用户界面的JavaScript库,React组件使用一个名为render()的方法,接收数据作为输入,输出页面中对应展示的内容。React除了可以使用外部传入的数据以外(通过this.props访问传入数据),组件还可以拥有其内部的状态数据(通过this.state访问状态数据)。当组件的状态
Stella981 Stella981
3年前
Lightning Web Components html_templates(三)
LightningWebComponents强大之处在于模版系统,使用了虚拟dom进行智能高效的组件渲染。使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据数据绑定我们可以使用{property}绑定组件模版属性到一个组件js类中的属性一个简单的例子组件class
taskbuilder taskbuilder
1个月前
TaskBuilder前端页面UI界面设计
TaskBuilder前端页面UI界面设计为了方便大家快速设计前端页面的UI界面,TaskBuilder提供了可视化的UI界面设计器,在该设计器内,可以从左侧的组件库中拖拽组件到页面上实现组件的添加,TaskBuilder提供了几十种丰富的UI组件,分为容
taskbuilder taskbuilder
3星期前
TaskBuilder前端请求后台服务的方式
TaskBuilder前端请求后台服务的方式在TaskBuilder的前端页面设计器的组件库里,有一个名为“服务请求”的不可视组件,它是前后端沟通的桥梁,前端页面都是通过这个组件来实现与后台服务的通信,在这个组件的属性里可以设置具体要请求的后台服务的路径,
taskbuilder taskbuilder
3星期前
TaskBuilder触发前端组件请求后台服务的常见事件
当以下事件发生时,可能会触发相关前端组件向后台服务发起请求:4.3.1页面加载时这种情况主要用于数据查询,在前端页面加载完毕后(页面静态内容渲染完毕),会自动判断页面里的每个前端组件是否设置了数据查询操作,如果设置了,则自动请求相应的后台服务进行数据查询,