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(
                      width: 5,
                      color: Colors.blue,
                    ),
                    // 边框圆角
                    borderRadius: BorderRadius.circular(20),
                  )),
                  // button 按钮阴影高度
                  el