Flutter有状态组件使用详解
程序员文章站
2022-06-22 12:23:54
有状态组件flutter 主要有分有状态组件 statefulwidget 和无状态组件 statelesswidget,前面我们使用到的都是无状态组件,没有让页面上的内容发生变化,当我们有需要对页面...
有状态组件
flutter 主要有分有状态组件 statefulwidget 和无状态组件 statelesswidget,前面我们使用到的都是无状态组件,没有让页面上的内容发生变化,当我们有需要对页面的内容进行动态修改的时候 ,如果我们使用无状态组件,页面上的内容就不会被更新,这时需要用到有状态组件。
有状态组件就是继承了statefulwidget的组件,内容更改时调用
setstate(() { 更改的内容});
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables 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: const text('flutter demo'), ), body: const homecontent(), ), theme: themedata( primaryswatch: colors.yellow, ), ); } } //有状态自定义组件有两个类,我们需要返回的写在第二个类中 class homecontent extends statefulwidget { const homecontent({key? key}) : super(key: key); @override _homecontentstate createstate() => _homecontentstate(); } class _homecontentstate extends state<homecontent> { int count = 0; @override widget build(buildcontext context) { return center( child: column( children: [ chip( label: text("$count"), ), elevatedbutton( onpressed: () { setstate(() { count++; }); }, child: text("点击加一")) ], ), ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 核工程与核技术排名靠前的院校:哪个学校最好?哪个大学好?
下一篇: 学习前端过程中用到的资料