Flutter 组件（一）组件概述

Flutter开发笔记 Flutter 组件（一）组件概述

---

- 文章信息 -

Author: Jack Lee (jcLee95)
Visit me at: https://jclee95.blog.csdn.net
Email: [email protected].
Shenzhen China
Address of this article:https://blog.csdn.net/qq_28550263/article/details/131387252

---

【介绍】：本文介绍Flutter 组件中的一些基本概念。

下一节：《 Flutter 组件（二）文本 与 输入框组件 》

---

---

1. Flutter 组件简介

Flutter组件是 Flutter 框架中用于构建用户界面的可复用元素，可以是按钮、文本框、图像、布局等等.它们可以自由组合在一起，形成丰富多样的用户界面。Flutter提供了丰富的预定义组件，同时也支持自定义组件的开发，每个组件都有自己的属性和状态，并且可以对用户的输入做出响应。

Flutter 组件具有可复用性，组件可以在不同的地方重复使用，提高代码的可维护性和重用性。组件是可组合的，通过组合不同类型的组件，可以构建出复杂的用户界面。组件还具有灵活性。Flutter提供了丰富的组件库，同时也支持自定义组件的开发，可以根据应用的需求进行灵活的定制。

2. Flutter 组件功能类别

Flutter组件可以按照功能和用途进行分类，主要可以分为以下几类：

类型	描述
文本类组件	用于显示文本内容，例如Text、RichText、TextField等。
图像类组件	用于显示图像，例如Image、Icon等。
按钮类组件	用于创建交互式按钮，例如RaisedButton、FlatButton、IconButton等。
列表类组件	用于显示列表或网格布局，例如ListView、GridView等。
容器类组件	用于包裹其他组件，添加装饰或样式，例如Card、AlertDialog、BottomSheet等。
布局类组件	用于控制组件在界面中的位置和大小，例如Container、Row和Column、Stack等。

3. 有状态组件和无状态组件

在Flutter中，组件被分为两种类型：无状态组件（Stateless Widget）和有状态组件（Stateful Widget）。它们的主要区别在于是否需要管理内部状态。在本节中，我们将分别介绍两种组件的特点和用法，并在最后归纳它们的区别。

1.1 无状态组件

无状态组件（Stateless Widget）是不需要管理内部状态的组件，它只依赖于外部传入的数据（通过构造函数）。当外部数据发生变化时，无状态组件会重新构建。无状态组件通常用于构建静态界面，或者只依赖外部数据的组件。例如：

import 'package:flutter/material.dart';

// 无状态组件
class MyText extends StatelessWidget {
    
    
  final String text;

  MyText({
    
    required this.text});

  @override
  Widget build(BuildContext context) {
    
    
    return Text(text);
  }
}

1.2 有状态组件

有状态组件（Stateful Widget）需要 管理内部状态，当内部状态发生变化时，组件会重新构建。有状态组件通常用于构建动态界面，或者需要响应用户交互的组件。例如：

import 'package:flutter/material.dart';

// 有状态组件
class Counter extends StatefulWidget {
    
    
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
    
    
  int _count = 0;

  void _incrementCounter() {
    
    
    setState(() {
    
    
      _count = _count + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: [
        Text('$_count'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

1.3 两者的比较

无状态组件 和 有状态组件 的主要区别在于 是否需要管理内部状态。比较起来，两者的特点可以归纳为：

• 无状态组件 不需要管理内部状态，而 有状态组件 需要管理内部状态。
• 无状态组件 通常用于构建静态界面，而 有状态组件 通常用于构建动态界面。
• 无状态组件 的性能通常优于有状态组件，因为它们不需要管理内部状态。