欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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("点击加一"))
      ],
    ),
    );
  }
}

Flutter有状态组件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。