【Flutter】基础入门：Widgets

在 Flutter 中，Widget 是应用程序构建块的基础。几乎所有的对象都是一个 Widget，不论是显示在屏幕上的 UI 元素，还是一些功能性组件（例如用于手势检测的 GestureDetector，或用于传递应用主题数据的 Theme），它们都是 Widget。与原生开发中“控件”仅指 UI 元素不同，Flutter 的 Widget 概念更加广泛，它涵盖了界面显示、布局、手势检测、状态管理等多个层面。本文将深入讲解 Flutter 中的 Widget，帮助你从概念到实践掌握它们。

什么是 Widget

Widget 是 Flutter 应用的核心概念。万物皆 Widget，这是开发 Flutter 时需要牢记的一点。无论是屏幕上展示的文字、图片、按钮，还是布局的容器、手势检测器，甚至主题和动画控制，它们都以 Widget 的形式存在。你可以将 Widget 理解为 UI 元素的描述或一个函数，在输入某些参数时返回一个特定的用户界面。

Flutter 中的 Widget 分类

Flutter 中的 Widget 大体上可以分为两类：

有状态的 Widget (StatefulWidget)
无状态的 Widget (StatelessWidget)

无状态的 Widget (`StatelessWidget`)

StatelessWidget 是静态的，它们在生命周期中不发生变化。简单的文本、图标和图片等不需要交互的组件通常是无状态的。

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget Example')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

在上面的代码中，MyApp 是一个 StatelessWidget，它只需要简单地显示一行文字。

有状态的 Widget (`StatefulWidget`)

StatefulWidget 可以管理和更新状态。它们能够根据用户的交互或内部事件（如计时器或动画）来动态更新界面。每个 StatefulWidget 都有一个对应的 State 对象，负责管理 Widget 的状态。

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pressed the button this many times:'),
              Text('$_counter', style: Theme.of(context).textTheme.headline4),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

在这个例子中，点击按钮会触发 _incrementCounter 函数，更新 State 中的计数器值，随后通过 setState() 通知 Flutter 重新构建 UI 以反映最新的状态。

常见的基础 Widget

文本 Widget (`Text`)

Text 是用于显示简单文本的 Widget。它可以通过 style 属性自定义文字的字体、颜色和大小。

示例：

Text(
  'Hello, Flutter!',
  style: TextStyle(fontSize: 24, color: Colors.blue),
)

图片 Widget (`Image`)

Image 用于加载和显示图片。它支持多种方式加载图片，如网络图片、文件图片、资源图片等。

示例：

Image.network('https://example.com/sample-image.jpg')

图标 Widget (`Icon`)

Icon 是用于显示图标的 Widget，Flutter 提供了丰富的内置图标库，如 Material Icons。

示例：

Icon(Icons.favorite, color: Colors.red, size: 40)

容器 Widget (`Container`)

Container 是最常用的布局 Widget，它可以包含子组件，并支持设置大小、边距、填充、对齐方式等。

示例：

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.all(20),
  color: Colors.blue,
  child: Text('Container example'),
)

列 Widget (`Column`) 与行 Widget (`Row`)

Column 和 Row 是用于垂直和水平排列子组件的 Widget。它们常用于构建基本的布局。

示例：

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

按钮 Widget (`ElevatedButton`)

按钮是常见的交互元素，Flutter 提供了多种按钮组件，如 ElevatedButton、TextButton 和 IconButton。

示例：

ElevatedButton(
  onPressed: () {},
  child: Text('Click Me'),
)

布局 Widgets

Flutter 提供了丰富的布局 Widgets，帮助开发者构建灵活且强大的 UI 布局。

`Padding`

Padding 用于给组件增加内边距。

示例：

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Padded Text'),
)

`Center`

Center 将子 Widget 居中显示。

示例：

Center(
  child: Text('Centered Text'),
)

`Stack`

Stack 是一个叠加布局 Widget，允许将多个 Widget 叠加显示。常用于实现浮动按钮或重叠布局。

示例：

Stack(
  children: <Widget>[
    Container(color: Colors.blue, width: 200, height: 200),
    Positioned(
      left: 50,
      top: 50,
      child: Text('Stacked Text'),
    ),
  ],
)

`Expanded`

Expanded 用于在 Row 或 Column 中扩展子组件，分配剩余的空间。

示例：

Row(
  children: <Widget>[
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
)

Widget 的生命周期

在 StatefulWidget 中，Widget 的生命周期主要有以下几个阶段：

createState()：创建状态对象，这个对象会保持 Widget 的状态。
initState()：初始化状态，只调用一次。
build()：构建 Widget 的 UI，每次状态改变时都会调用。
setState()：当需要更新 UI 时调用此方法。
dispose()：当 Widget 被销毁时调用，用于清理资源。

总结

在 Flutter 中，Widget 是应用程序构建的核心，涵盖了所有的 UI 组件、布局和功能模块。无论是无状态还是有状态的 Widget，都通过嵌套和组合的方式来构建复杂的用户界面。掌握基础的 Widget，如 Text、Image、Icon，以及常用的布局 Widget，如 Column、Row、Padding、Expanded，是学习 Flutter 的基础。通过理解 Widget 的使用方式和它们的生命周期，开发者能够灵活构建高效、可维护的应用。