广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter有状态组件使用详解
  • 820
分享到

Flutter有状态组件使用详解

2024-04-02 19:04:59 820人浏览 安东尼
摘要

有状态组件 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("点击加一"))
      ],
    ),
    );
  }
}

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

--结束END--

本文标题: Flutter有状态组件使用详解

本文链接: https://www.lsjlt.com/news/162659.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作