您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-11(StatefulWidget 件有状态组件、页面上绑定数据、改变页面数据)

2020-04-30【Flutter】1289人已围观

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

## 一、Flutter 中自定义有状态组件

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302234514.png)

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

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-10(页面布局 Wrap 组件)

下一篇：flutter-12( BottomNavigationBar 自定义底部导航条、以及实现页面切换)