zoukankan      html  css  js  c++  java
  • 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) {
        return MaterialApp(
          home:Scaffold(
            appBar: AppBar(
              title: Text('Flutter Demo')
            ),
            body: HomePage(),
          )
        );
      }
    }
    
    class HomePage extends StatelessWidget {
      int countNum=1; 
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            SizedBox(height: 200),
            Text("${this.countNum}"),
            SizedBox(height: 20),
            RaisedButton(
              child: Text("按钮"),
              onPressed: (){
                  // setState()   //错误写法       没法改变页面里面的数据
              this.countNum++;
                  print(this.countNum);
              },
            )
          ],
        );
      }
    }


    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('Flutter Demo')
            ),
            body: 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++;
                 });
              },
            )
          ],
        );
      }
    }


    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('Flutter Demo')
            ),
            body: 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()
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text("添加数据"),
              onPressed: (){
                setState(() {
                    this.list.add('新增数据1');
                    this.list.add('新增数据2');
                });
              },
            )
          ],
        );
      }
    }

  • 相关阅读:
    $.data(elem, key, val) 和 elem.data(key, val)
    支付宝调起,应用签名失败,请联系商家
    关于load方法加载时间问题
    你学过的每一样东西,你遭受的每一次苦难,都会在你一生中的某个时候派上用场。 ——佩内洛普·菲兹杰拉德 《离岸》
    iOS视图生命周期总结(别人博客荡来的)
    闲言(诗三百三首)
    iOS 点击WebView中的链接,跳转指定控制器
    IOS 版本号大小比较
    iOS二维码,条形码扫描问题
    IOS使用个推遇到的坑
  • 原文地址:https://www.cnblogs.com/loaderman/p/11186478.html
Copyright © 2011-2022 走看看