Flutter StatelessWidget 和 StatefulWidget的区别

Flutter StatelessWidget 和 StatefulWidget的区别 是啥

2 回复

StatelessWidget是无状态组件，状态不可变的widget StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变

通俗的讲我们要改变组件页面上面的数据的话就继承StatefulWidget，如果页面上面的数据是永远不变的话就继承StatelessWidget

更多关于Flutter StatelessWidget 和 StatefulWidget的区别 的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


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

StatelessWidget是无状态组件，状态不可变的widget StatefulWidget是有状态组件，持有的状态可能在widget生命周期改变

通俗的讲我们要改变组件页面上面的数据的话就继承StatefulWidget，如果页面上面的数据是永远不变的话就继承StatelessWidget

1、Flutter StatelessWidget创建组件

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child:Text(
        '你好Flutter 111',
        textDirection: TextDirection.ltr,

        style: TextStyle(
            fontSize: 40.0,
            color: Colors.yellow,
            // color: Color.fromRGBO(244, 233, 121, 0.5),
        ),
      )
    );
  }
}

2、Flutter StatefulWidget创建组件


import 'package:flutter/material.dart';

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++;
              });
            },
          )          
        ],
      )
    );
  }
}
回到顶部