展示型组件

展示型组件负责呈现内容，没有复杂的交互逻辑。掌握它们，你就能把数据变成用户看得见的界面。

Text — 文本

Text 是最基本的展示组件，用于显示一段文字。

基本用法

dart

import 'package:flutter/material.dart';

class TextExample extends StatelessWidget {
  const TextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Text 示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('Hello Flutter'),
            SizedBox(height: 16),
            Text(
              'Hello Flutter',
              // ─── ★ TextStyle 属性 ──────────────
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
              // ─── ☆ TextStyle 属性 ──────────────
            ),
          ],
        ),
      ),
    );
  }
}

TextStyle 常用属性

dart

TextStyle(
  fontSize: 16,                        // 字号
  fontWeight: FontWeight.bold,          // 字重（w100~w900, bold, normal）
  fontStyle: FontStyle.italic,          // 斜体
  color: Colors.red,                   // 颜色
  backgroundColor: Colors.yellow,       // 背景色
  letterSpacing: 1.0,                  // 字母间距
  wordSpacing: 2.0,                    // 单词间距
  height: 1.5,                         // 行高倍数
  decoration: TextDecoration.underline, // 装饰线
  decorationColor: Colors.red,          // 装饰线颜色
  overflow: TextOverflow.ellipsis,     // 溢出处理
)

文本溢出处理

dart

import 'package:flutter/material.dart';

class TextOverflowExample extends StatelessWidget {
  const TextOverflowExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文本溢出处理')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              '这是一段很长的文本，超出部分会被截断并显示省略号',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }
}

RichText / TextSpan — 富文本

一段文字中有不同样式时，用 RichText + TextSpan：

dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class RichTextExample extends StatelessWidget {
  const RichTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RichText 示例')),
      body: Center(
        child: RichText(
          text: TextSpan(
            style: DefaultTextStyle.of(context).style,
            children: [
              const TextSpan(text: '已阅读并同意'),
              TextSpan(
                text: '《用户协议》',
                style: const TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                recognizer: TapGestureRecognizer()..onTap = () {
                  // 打开协议
                },
              ),
              const TextSpan(text: '和'),
              const TextSpan(
                text: '《隐私政策》',
                style: TextStyle(color: Colors.blue),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用主题文字样式

dart

import 'package:flutter/material.dart';

class ThemeTextExample extends StatelessWidget {
  const ThemeTextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主题文字样式')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('displayLarge', style: Theme.of(context).textTheme.displayLarge),
            Text('headlineMedium', style: Theme.of(context).textTheme.headlineMedium),
            Text('titleLarge', style: Theme.of(context).textTheme.titleLarge),
            Text('bodyLarge', style: Theme.of(context).textTheme.bodyLarge),
            Text('bodyMedium', style: Theme.of(context).textTheme.bodyMedium),
            Text('labelLarge', style: Theme.of(context).textTheme.labelLarge),
          ],
        ),
      ),
    );
  }
}

Image — 图片

加载方式

组件	来源	用法
`Image.asset`	本地资源	`Image.asset('assets/logo.png')`
`Image.network`	网络 URL	`Image.network('https://example.com/img.png')`
`Image.file`	本地文件	`Image.file(File(path))`
`Image.memory`	内存字节	`Image.memory(bytes)`

常用属性

dart

import 'package:flutter/material.dart';

class ImagePropertiesExample extends StatelessWidget {
  const ImagePropertiesExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Image 属性')),
      body: Center(
        child: Image.asset(
          'assets/photo.jpg',           // 需在 pubspec.yaml 中声明
          width: 200,
          height: 200,
          fit: BoxFit.cover,            // 缩放模式
          alignment: Alignment.center,  // 对齐方式
          filterQuality: FilterQuality.medium,
        ),
      ),
    );
  }
}

BoxFit 缩放模式

值	效果	适用场景
`BoxFit.fill`	拉伸填满，可能变形	不推荐
`BoxFit.contain`	保持比例，完整显示，可能留白	商品图
`BoxFit.cover`	保持比例，裁剪填满，不留白	头像、背景图
`BoxFit.fitWidth`	保持比例，宽度填满	固定宽度
`BoxFit.fitHeight`	保持比例，高度填满	固定高度
`BoxFit.none`	原始大小，居中	小图标
`BoxFit.scaleDown`	与 contain 相同，但不会放大	缩略图

圆形图片

dart

import 'package:flutter/material.dart';

class CircleImageExamples extends StatelessWidget {
  const CircleImageExamples({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('圆形图片')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 方式一：CircleAvatar
            const CircleAvatar(
              backgroundColor: Colors.grey,
              radius: 40,
              child: Icon(Icons.person, size: 40, color: Colors.white),
            ),
            // 方式二：ClipOval
            ClipOval(
              child: Container(
                width: 80, height: 80,
                color: Colors.blue,
                child: const Icon(Icons.person, size: 40, color: Colors.white),
              ),
            ),
            // 方式三：ClipRRect 圆角
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Container(
                width: 80, height: 80,
                color: Colors.green,
                child: const Icon(Icons.person, size: 40, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

声明资源

在 pubspec.yaml 中声明图片资源后才能使用 Image.asset：

yaml

flutter:
  assets:
    - assets/images/
    - assets/icons/logo.png

使用 2.0x / 3.0x 适配图片时，按目录存放：

assets/images/
├── logo.png         # 默认 1.0x
├── 2.0x/logo.png    # 2.0x
└── 3.0x/logo.png    # 3.0x

Icon — 图标

Material 图标

dart

import 'package:flutter/material.dart';

class IconExample extends StatelessWidget {
  const IconExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Icon 示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: const [
            Icon(Icons.home),
            Icon(Icons.favorite, color: Colors.red, size: 32),
            Icon(Icons.search, size: 32),
          ],
        ),
      ),
    );
  }
}

常用图标类

类	风格	示例
`Icons`	Material Design	`Icons.home`, `Icons.search`, `Icons.settings`
`CupertinoIcons`	iOS 风格	`CupertinoIcons.search`, `CupertinoIcons.settings`

ImageIcon — 自定义图标

dart

ImageIcon(
  AssetImage('assets/icons/custom.png'),
  color: Colors.blue,
  size: 24,
)

Card — 卡片

Card 是 Material Design 风格的卡片容器，自带圆角和阴影。

基本用法

dart

import 'package:flutter/material.dart';

class CardExample extends StatelessWidget {
  const CardExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Card 示例')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Card(
              margin: const EdgeInsets.all(8),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: const Text('卡片内容'),
              ),
            ),
            Card(
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12),
              ),
              child: const ListTile(
                leading: Icon(Icons.person),
                title: Text('张三'),
                subtitle: Text('Flutter 开发者'),
                trailing: Icon(Icons.chevron_right),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

常用属性

属性	说明	默认值
`elevation`	阴影深度	`1.0`
`margin`	外边距	`4.0`
`shape`	形状	`RoundedRectangleBorder`
`color`	背景色	主题 `cardColor`
`clipBehavior`	裁剪行为	`Clip.none`

DecoratedBox — 装饰盒子

DecoratedBox 在子组件绘制前后添加装饰效果，功能类似 Container 的 decoration，但更灵活。

基本用法

dart

import 'package:flutter/material.dart';

class DecoratedBoxExample extends StatelessWidget {
  const DecoratedBoxExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('DecoratedBox 示例')),
      body: Center(
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.grey),
            boxShadow: const [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 8,
                offset: Offset(0, 2),
              ),
            ],
            gradient: const LinearGradient(
              colors: [Colors.blue, Colors.purple],
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: const Text('装饰盒子', style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

BoxDecoration 常用属性

属性	说明
`color`	背景色
`border`	边框
`borderRadius`	圆角
`boxShadow`	阴影（可多个）
`gradient`	渐变（LinearGradient / RadialGradient）
`image`	背景图
`shape`	形状（rectangle / circle）

Scaffold — 页面骨架

Scaffold 是 Material Design 风格的页面骨架，提供了完整的页面结构。

基本用法

dart

Scaffold(
  appBar: AppBar(
    title: Text('页面标题'),
    actions: [
      IconButton(icon: Icon(Icons.search), onPressed: () {}),
    ],
  ),
  body: Center(child: Text('内容区域')),
  bottomNavigationBar: NavigationBar(
    destinations: [
      NavigationDestination(icon: Icon(Icons.home), label: '首页'),
      NavigationDestination(icon: Icon(Icons.person), label: '我的'),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  drawer: Drawer(child: Text('侧边栏')),
)

常用属性

属性	说明
`appBar`	顶部导航栏
`body`	主内容区域
`bottomNavigationBar`	底部导航栏
`floatingActionButton`	悬浮按钮
`floatingActionButtonLocation`	悬浮按钮位置
`drawer`	左侧抽屉
`endDrawer`	右侧抽屉
`backgroundColor`	背景色
`resizeToAvoidBottomInset`	是否为键盘让出空间

展示型组件速查

组件	用途
Text	显示文字
RichText	富文本
Image.asset / Image.network	图片
Icon	图标
Card	卡片容器
DecoratedBox	装饰盒子
Scaffold	页面骨架

下一步

交互型组件 — Button / TextField / Form / Dialog

展示型组件 ​

Text — 文本 ​

基本用法 ​

TextStyle 常用属性 ​

文本溢出处理 ​

RichText / TextSpan — 富文本 ​

使用主题文字样式 ​

Image — 图片 ​

加载方式 ​

常用属性 ​

BoxFit 缩放模式 ​

圆形图片 ​

声明资源 ​

Icon — 图标 ​

Material 图标 ​

常用图标类 ​

ImageIcon — 自定义图标 ​

Card — 卡片 ​

基本用法 ​

常用属性 ​

DecoratedBox — 装饰盒子 ​

基本用法 ​

BoxDecoration 常用属性 ​

Scaffold — 页面骨架 ​

基本用法 ​

常用属性 ​

展示型组件速查 ​

下一步 ​

展示型组件

Text — 文本

基本用法

TextStyle 常用属性

文本溢出处理

RichText / TextSpan — 富文本

使用主题文字样式

Image — 图片

加载方式

常用属性

BoxFit 缩放模式

圆形图片

声明资源

Icon — 图标

Material 图标

常用图标类

ImageIcon — 自定义图标

Card — 卡片

基本用法

常用属性

DecoratedBox — 装饰盒子

基本用法

BoxDecoration 常用属性

Scaffold — 页面骨架

基本用法

常用属性

展示型组件速查

下一步