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

港控/mmm° 2023-08-17 15:58 131阅读 0赞

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

![1057166-20190904150113329-129442363.png][]

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

![1057166-20190904154020863-740264989.png][]

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');
                });
              },
            )
          ],
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11459508.html

[1057166-20190904150113329-129442363.png]: /images/20230810/6898d7accf184d7dab198a0e7531e39e.png
[1057166-20190904154020863-740264989.png]: /images/20230810/7d51838ee19e44a5ba29b0c4f2f31f4c.png