zoukankan      html  css  js  c++  java
  • 14Flutter StatefulWidget有状态组件、页面上绑定数据、改变页面数据、实现计数器功能、动态列表

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

    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');
                });
              },
            )
          ],
        );
      }
    }
  • 相关阅读:
    【转】Skynet之消息队列
    [转]Skynet之斗转星移
    [转]skynet Lua中的协程
    win7 + nginx + php
    LexAndYacc 安装程序
    ubuntu + samba 共享失败
    [转]TDD之Dummy Stub Fake Mock
    【转】 纯技术帖:MMOG网络同步算法揭秘
    [转]帧锁定同步算法
    [转]游戏中的同步
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11459508.html
Copyright © 2011-2022 走看看