ByteNoteByteNote
字

字节笔记本

2026年3月22日

Flutter Material 按钮完全指南：ElevatedButton、TextButton、OutlinedButton 详解

#Flutter 专栏

这篇文章将全面介绍 Flutter 中 Material Design 按钮组件的使用，包括 ElevatedButton、TextButton、OutlinedButton、IconButton 等各类按钮的用法、属性配置和实际场景示例。

Material 按钮体系

Flutter 提供了多种 Material Design 风格的按钮组件：

组件说明视觉效果
ElevatedButton带阴影的凸起按钮立体感强，强调主要操作
TextButton文本按钮无边框无阴影，轻量操作
OutlinedButton边框按钮带轮廓线，次要操作
IconButton图标按钮圆形图标，工具类操作
FloatingActionButton浮动操作按钮屏幕右下角，核心操作

注意：旧版 Flutter 中的 RaisedButton、FlatButton、OutlineButton 已被废弃，请使用上述新组件替代。

ElevatedButton

凸起按钮，带有阴影效果，适合页面上的主要操作。

dart
ElevatedButton(
  onPressed: () {
    print('按钮被点击');
  },
  child: Text('提交'),
)

主要属性

属性类型说明
onPressedVoidCallback点击回调，为 null 时按钮禁用
onLongPressVoidCallback长按回调
childWidget按钮内容
styleButtonStyle按钮样式
autofocusbool是否自动获取焦点
focusNodeFocusNode焦点控制
clipBehaviorClip裁剪行为

自定义样式

dart
ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    foregroundColor: Colors.white,          // 文字颜色
    backgroundColor: Colors.blue,           // 背景颜色
    minimumSize: Size(200, 50),             // 最小尺寸
    maximumSize: Size(300, 50),             // 最大尺寸
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
    shape: RoundedRectangleBorder(          // 形状
      borderRadius: BorderRadius.circular(12),
    ),
    elevation: 8,                           // 阴影高度
    shadowColor: Colors.blue.withOpacity(0.3),
    textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),
  child: Text('自定义按钮'),
)

使用 ButtonStyle

ButtonStyle 提供更细粒度的样式控制：

dart
ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    // 背景色 - 根据不同状态设置
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.blue.shade700;
      }
      if (states.contains(MaterialState.disabled)) {
        return Colors.grey;
      }
      return Colors.blue;
    }),
    // 文字颜色
    foregroundColor: MaterialStateProperty.all(Colors.white),
    // 内边距
    padding: MaterialStateProperty.all(EdgeInsets.all(16)),
    // 形状
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
    ),
  ),
  child: Text('状态样式按钮'),
)

TextButton

文本按钮，没有边框和阴影，适合次要或辅助操作。

dart
TextButton(
  onPressed: () {},
  child: Text('了解更多'),
)

自定义样式

dart
TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    textStyle: TextStyle(fontSize: 16),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  ),
  child: Text('了解更多'),
)

带图标的文本按钮

dart
TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.send, size: 18),
  label: Text('发送'),
)

OutlinedButton

边框按钮，带有轮廓线，适合次要操作。

dart
OutlinedButton(
  onPressed: () {},
  child: Text('取消'),
)

自定义样式

dart
OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.red,
    side: BorderSide(color: Colors.red, width: 2),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  ),
  child: Text('删除'),
)

带图标的边框按钮

dart
OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add, size: 18),
  label: Text('添加项目'),
)

IconButton

图标按钮，通常用于工具栏或卡片中的操作。

dart
IconButton(
  onPressed: () {},
  icon: Icon(Icons.favorite),
)

主要属性

属性类型说明
iconWidget显示的图标
iconSizedouble图标大小，默认 24
colorColor图标颜色
splashColorColor点击水波纹颜色
tooltipString长按提示文字
paddingEdgeInsets内边距，默认 8
constraintsBoxConstraints尺寸约束

自定义样式

dart
IconButton(
  onPressed: () {},
  icon: Icon(Icons.search),
  color: Colors.blue,
  iconSize: 32,
  tooltip: '搜索',
  splashRadius: 24,
  style: IconButton.styleFrom(
    backgroundColor: Colors.blue.withOpacity(0.1),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

FloatingActionButton

浮动操作按钮，通常位于 Scaffold 的右下角。

dart
Scaffold(
  appBar: AppBar(title: Text('FAB Demo')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  body: Container(),
)

类型

类型说明
FloatingActionButton默认圆形
FloatingActionButton.extended扩展型，带文字标签
FloatingActionButton.small小尺寸
FloatingActionButton.large大尺寸
dart
// 扩展型 FAB
FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.edit),
  label: Text('编辑'),
)

// 小尺寸
FloatingActionButton.small(
  onPressed: () {},
  child: Icon(Icons.add),
)

FAB 位置

通过 floatingActionButtonLocation 控制位置：

dart
Scaffold(
  floatingActionButton: FloatingActionButton(onPressed: () {}),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  // 其他位置：
  // startFloat, endFloat, centerDocked, endDocked 等
)

按钮状态处理

禁用状态

将 onPressed 设为 null 即可禁用按钮：

dart
ElevatedButton(
  onPressed: null,  // 禁用
  child: Text('已禁用'),
)

禁用状态下，按钮的视觉样式会自动变为灰色。

加载状态

结合 StatefulWidget 实现加载效果：

dart
class LoadingButton extends StatefulWidget {
  @override
  _LoadingButtonState createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State<LoadingButton> {
  bool _isLoading = false;

  Future<void> _handlePress() async {
    setState(() => _isLoading = true);
    await Future.delayed(Duration(seconds: 2));
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isLoading ? null : _handlePress,
      child: _isLoading
          ? SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(
                strokeWidth: 2,
                color: Colors.white,
              ),
            )
          : Text('提交'),
    );
  }
}

完整示例

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

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

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter 按钮示例')),
        body: SingleChildScrollView(
          padding: EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 主要操作
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 50),
                ),
                child: Text('确认提交'),
              ),
              SizedBox(height: 12),

              // 次要操作
              OutlinedButton(
                onPressed: () {},
                style: OutlinedButton.styleFrom(
                  minimumSize: Size(double.infinity, 50),
                ),
                child: Text('取消'),
              ),
              SizedBox(height: 12),

              // 文本操作
              TextButton(
                onPressed: () {},
                child: Text('了解更多'),
              ),
              SizedBox(height: 12),

              // 图标按钮组
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.favorite_border),
                    tooltip: '收藏',
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.share),
                    tooltip: '分享',
                  ),
                  IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.bookmark_border),
                    tooltip: '书签',
                  ),
                ],
              ),
              SizedBox(height: 12),

              // 带图标的按钮
              ElevatedButton.icon(
                onPressed: () {},
                icon: Icon(Icons.send),
                label: Text('发送消息'),
                style: ElevatedButton.styleFrom(
                  minimumSize: Size(double.infinity, 50),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

按钮选择指南

场景推荐按钮
页面主要操作（提交、确认）ElevatedButton
次要操作（取消、返回）OutlinedButton
辅助操作（链接、了解更多）TextButton
工具类操作（搜索、收藏）IconButton
核心功能入口（新增、编辑）FloatingActionButton
列表项中的操作IconButton 或小尺寸按钮
Flutter 专栏
上一篇

Go 语言 go.sum 文件工作机制详解

下一篇

Flutter Material 按钮完全指南：ElevatedButton、TextButton、OutlinedButton 详解

分享: