Flutter 基础组件

Flutter 基础组件详解

Flutter 作为一套跨平台 UI 框架，其核心构建块就是组件（Widgets）。掌握 Flutter 的基础组件是开发高效、美观移动应用的第一步。本文将带你了解 Flutter 中最常用的基础组件，包括布局组件、文本组件、按钮组件、图片组件和容器组件，并通过代码示例帮助你快速上手。

在 Flutter 中，Widget 是构成用户界面的基本单元。它不仅仅是 UI 控件，还包括布局、样式、交互行为的描述。Flutter 的界面完全由 Widget 树构成，通过组合不同的 Widget，我们可以构建出复杂的用户界面。

Flutter 的组件大致可以分为两类：

无状态组件（StatelessWidget）：UI 不随时间或用户交互改变，比如一个固定的文本或图标。
有状态组件（StatefulWidget）：UI 可以根据数据或用户操作动态更新，比如计数器、输入框等。

二、常用基础组件介绍

1. 文本组件（Text）

作用：用于显示文本内容。

常用属性：

text：要显示的字符串。
style：文本样式，如字体大小、颜色、字体家族等。
textAlign：文本对齐方式（如居中、左对齐等）。

示例代码（StatelessWidget）：

dart 复制代码

import 'package:flutter/material.dart';

class TextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hello, Flutter!',
      style: TextStyle(
        fontSize: 24,
        color: Colors.blue,
        fontWeight: FontWeight.bold,
      ),
      textAlign: TextAlign.center,
    );
  }
}

2. 容器组件（Container）

作用：一个非常常用的布局组件，可以包含一个子 Widget，并为其设置背景色、边距、内边距、边框等样式。

常用属性：

child：子组件。
color：背景颜色。
padding：内边距。
margin：外边距。
decoration：装饰（如背景、边框、圆角等）。

示例代码：

dart 复制代码

Container(
  color: Colors.lightBlue,
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(10),
  child: Text(
    '我是一个容器',
    style: TextStyle(color: Colors.white),
  ),
)

3. 图片组件（Image）

作用：用于显示图片，支持网络图片、本地资源图片和 Asset 图片。

常用属性：

image：图片来源，可以是 AssetImage、NetworkImage等。
width/ height：图片宽高（可选）。
fit：图片填充模式（如 BoxFit.cover, BoxFit.contain）。

加载网络图片示例：

dart 复制代码

Image.network(
  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
  width: 200,
  fit: BoxFit.cover,
)

加载本地资源图片（需在 pubspec.yaml 中配置）：

dart 复制代码

flutter:
  assets:
    - assets/images/my_image.png
Image.asset('assets/images/my_image.png')

4. 按钮组件

Flutter 提供了多种按钮组件，最常用包括：

a. ElevatedButton（凸起按钮）

dart 复制代码

ElevatedButton(
  onPressed: () {
    print('按钮被点击了！');
  },
  child: Text('点击我'),
)

b. TextButton（文本按钮，无背景）

dart 复制代码

TextButton(
  onPressed: () {
    print('文本按钮被点击');
  },
  child: Text('文本按钮'),
)

c. OutlinedButton（边框按钮）

dart 复制代码

OutlinedButton(
  onPressed: () {},
  child: Text('边框按钮'),
)

⭐ 提示：onPressed为 null 时，按钮将处于禁用状态，不可点击。

5. 布局组件

Flutter 提供了多种布局组件用于组织和排列子组件，以下是几个最常用的：

a. Row（水平布局）

将子组件在一行内从左到右排列。

dart 复制代码

Row(
  children: [
    Text('左边'),
    SizedBox(width: 10), // 间距
    Text('右边'),
  ],
)

b. Column（垂直布局）

将子组件从上到下垂直排列。

dart 复制代码

Column(
  mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
  children: [
    Text('上方'),
    Text('下方'),
  ],
)

c. Stack（层叠布局）

子组件按照添加顺序层叠显示，常用于重叠效果。

dart 复制代码

Stack(
  children: [
    Container(color: Colors.blue, width: 100, height: 100),
    Positioned(
      top: 20,
      left: 20,
      child: Text('我是层叠在上面的文字', style: TextStyle(color: Colors.white)),
    ),
  ],
)

6. 输入框组件（TextField）

用于接收用户输入，比如账号、密码、搜索框等。

基本用法：

dart 复制代码

TextField(
  decoration: InputDecoration(
    labelText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
)

⭐ 提示：TextField 通常需要配合 StatefulWidget使用，以获取或处理用户输入内容。

三、如何组合使用基础组件？

下面是一个综合示例，展示如何将上述基础组件组合在一起，构建一个简单的用户登录界面：

dart 复制代码

import 'package:flutter/material.dart';

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              decoration: InputDecoration(labelText: '用户名'),
            ),
            SizedBox(height: 16),
            TextField(
              decoration: InputDecoration(labelText: '密码'),
              obscureText: true, // 隐藏密码
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                print('登录按钮被点击');
              },
              child: Text('登录'),
            ),
          ],
        ),
      ),
    );
  }
}

四、总结

组件类别	常用组件	用途简述
文本	`Text`	显示文本信息
容器	`Container`	包裹子组件，设置样式、边距、背景等
图片	`Image.asset`/ `Image.network`	显示本地或网络图片
按钮	`ElevatedButton`、`TextButton`、`OutlinedButton`	响应用户点击操作
布局	`Row`、`Column`、`Stack`	组织子组件的排列方式
输入	`TextField`	接收用户输入的文本信息

Flutter 基础组件