it营大地专栏

Flutter StatefulWidget有状态组件的使用,通过StatefulWidget实现计数器

发布于 8 个月前 作者 phonegap100 182 次浏览 来自 分享

在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget。

StatelessWidget是无状态组件,状态不可变的widget StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变。通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到StatefulWidget

下面我们给大家讲解一下Flutter StatefulWidget有状态组件在页面上绑定数据以及改变页面数据

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text('有状态的组件')
        ),
        body: HomePage(),
      )
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int count=0;
  @override
  Widget build(BuildContext context) {
    return Container(
          
      child:Column(
        children: <Widget>[
          Chip(
            label: Text("${this.count}")           
          ),
          RaisedButton(
            child: Text('增加'),
            onPressed: (){             
              // print(this.count);
              setState(() {
                 this.count++;
              });
            },
          )          
        ],
      )
    );
  }
}
回到顶部