Flutter 基础 widgets Button

TextButton（文本按钮）

 

用法：

（1）、TextButton() 创建普通的文本按钮

（2）、TextButton.icon() 创建一个带图标的文本按钮

属性：

child：Widget，必填，按钮内容

onPressed：void Function()，必填，点击事件

style: ButtonStyle，按钮样式

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Text Button'),
        ),
        body: Container(
          padding: const EdgeInsets.all(10),
          child: Wrap(
            alignment: WrapAlignment.start,
            children: [
              // 普通文本按钮
              TextButton(
                onPressed: () {}, // 点击触发
                onLongPress: () {}, // 长按触发
                child: const Text('TextButton'),
              ),
              // 文本按钮 -- 属性用法
              TextButton(
                onPressed: () {},
                child: const Text('TextButton'),
                style: ButtonStyle(
                  // button 按钮字体样式，按钮颜色由 foregroundColor 设置
                  textStyle: MaterialStateProperty.all(
                    const TextStyle(
                      fontSize: 30, // 字体大小
                      color: Colors.purple, // 注意：此处字体颜色无效
                      fontWeight: FontWeight.bold, // 字体粗细
                    ),
                  ),
                  // button 按钮文本和Icon的颜色，上面 textStyle 中的color设置无效
                  foregroundColor: MaterialStateProperty.all(
                    Colors.red,
                  ),
                  // button 按钮背景填充颜色
                  backgroundColor: MaterialStateProperty.all(
                    Colors.purple[50],
                  ),
                  // button 点击时的高亮颜色
                  overlayColor: MaterialStateProperty.all(
                    Colors.yellowAccent,
                  ),
                  // button 按钮内边距
                  padding: MaterialStateProperty.all(const EdgeInsets.all(20)),
                  // button 按钮边框相关的样式
                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    // 边框样式
                    side: const BorderSide(
                       5,
                      color: Colors.blue,
                    ),
                    // 边框圆角
                    borderRadius: BorderRadius.circular(20),
                  )),
                  // button 按钮阴影高度
                  elevation: MaterialStateProperty.all(20),
                ),
              ),
              // 带 icon 的文本按钮
              TextButton.icon(
                onPressed: () {},
                icon: const Icon(
                  Icons.add,
                  size: 18,
                  color: Colors.red,
                ),
                label: const Text('TextButton'),
              ),
            ],
          ),
        ));
  }
}

 

ElevatedButton（凸起按钮）

 

通常作为主按钮，用法：

（1）、ElevatedButton() 创建普通的凸起按钮

（2）、ElevatedButton.icon() 创建一个带图标的凸起按钮

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Elevated Button')),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Wrap(
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text('ElevatedButton'),
            ),
            // 给按钮添加阴影
            ElevatedButton(
              onPressed: () {},
              child: const Text('Shadow'),
              style: ButtonStyle(
                shadowColor: MaterialStateProperty.all(
                  Colors.amber,
                ),
                elevation: MaterialStateProperty.all(10),
              ),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text('ElevatedButton'),
              style: ButtonStyle(
                // Bad：按钮的宽度小于文本宽度
                fixedSize: MaterialStateProperty.all(
                  const Size(80, 20),
                ),
                // 修改按钮的背景色
                backgroundColor: MaterialStateProperty.all(
                  Colors.red[400],
                ),
              ),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text('PURCHASE'),
              style: ButtonStyle(
                // 按钮中文本的对齐方式
                alignment: Alignment.bottomRight,
                backgroundColor: MaterialStateProperty.all(
                  Colors.purple[400],
                ),
              ),
            ),
            // 带 icon 的凸起按钮
            ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.shopping_cart),
              label: const Text('ADD TO CART'),
            ),
            // Bad: 按钮中的icon和文本垂直居中展示
            ElevatedButton(
              onPressed: () {},
              child: Column(
                children: const [
                  Icon(Icons.add),
                  Text('SEE ALL'),
                ],
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                  Colors.red[400],
                ),
              ),
            ),
            // Bad: 按钮中同时使用2个icon
            ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.ios_share_outlined),
              label: Row(
                children: const [
                  Text('SHOW'),
                  Icon(Icons.close),
                ],
              ),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(
                  Colors.red[400],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

OutlinedButton（轮廓按钮）

 

中等强调的按钮，重要程度仅次于主按钮

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Outlined Button'),
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            OutlinedButton(
              onPressed: () {},
              child: const Text('Outlined Button'),
            ),
            OutlinedButton(
              onPressed: () {},
              child: const Text('轮廓按钮'),
              style: ButtonStyle(
                textStyle: MaterialStateProperty.all(
                  const TextStyle(
                    fontSize: 30,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                // 前景色
                foregroundColor: MaterialStateProperty.resolveWith((states) {
                  // 点击时，按钮的文本颜色为红色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.red;
                  }
                  // 默认状态的文本颜色
                  return Colors.green;
                }),
                // 背景色
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  // 点击时，按钮的背景颜色
                  if (states.contains(MaterialState.pressed)) {
                    return Colors.yellow;
                  }
                  // 默认状态的背景色
                  return Colors.white;
                }),
                // 按钮阴影
                shadowColor: MaterialStateProperty.all(Colors.grey),
                elevation: MaterialStateProperty.all(20),
                // 按钮边框
                side: MaterialStateProperty.all(
                  const BorderSide(
                    color: Colors.green,
                     2,
                  ),
                ),
                // 按钮形状
                shape: MaterialStateProperty.all(
                  // 圆形按钮
                  // const CircleBorder(
                  //   side: BorderSide(
                  //     color: Colors.green,
                  //      2,
                  //   ),
                  // ),
                  // 椭圆按钮
                  const StadiumBorder(
                    side: BorderSide(
                      color: Colors.green,
                       2,
                    ),
                  ),
                ),
                // 按钮大小
                minimumSize: MaterialStateProperty.all(
                  const Size(200, 100),
                ),
                // 水波纹的颜色
                overlayColor: MaterialStateProperty.all(
                  Colors.purple,
                ),
              ),
            ),
            OutlinedButtonTheme(
              data: OutlinedButtonThemeData(
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.all(Colors.red),
                ),
              ),
              child: OutlinedButton(
                onPressed: () {},
                child: const Text('轮廓按钮'),
                // 此处的style会覆盖上面的style样式
                style: ButtonStyle(
                  overlayColor: MaterialStateProperty.all(Colors.blue),
                ),
              ),
            ),
            // 图标按钮
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.add),
              color: Colors.red,
              splashColor: Colors.lightBlue,
            ),
          ],
        ),
      ),
    );
  }
}

按钮组

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ButtonBar'),
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: [
            // 按钮组：默认单行右对齐，溢出垂直分布
            Container(
               double.infinity,
              color: Colors.pink,
              child: ButtonBar(
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮一'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮二'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮三'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮四'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮五'),
                  ),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('按钮六'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

特殊的常用按钮

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('特殊按钮'),
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        child: Column(
          children: const [
            // 返回按钮
            BackButton(),
            // 关闭按钮
            CloseButton(
              color: Colors.red,
            )
          ],
        ),
      ),
      // 浮动按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Create',
        child: const Icon(Icons.add),
        backgroundColor: Colors.green,
      ),
    );
  }
}