Flutter Button使用

已于 2024-09-08 14:59:20 修改
阅读量620 收藏 10
点赞数 21
分类专栏： Flutter 文章标签： MaterialButton ElevatedButton OutlinedButton IconButton
于 2024-09-08 14:58:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangying1994/article/details/141940349
版权

        Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。

        基本的按钮特点：

        1.按下时都会有“水波文动画”。
        2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。

ElevatedButton

简单实现

  const ElevatedButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior,
    super.statesController,
    required super.child,
    super.iconAlignment,
  });
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            ElevatedButton(
              onPressed: () {
                print('ElevatedButton clicked');
              },
              child: Text("Click ElevatedButton"),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  elevation: 10,
                  minimumSize: Size(150, 50),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10))),
            )
          ],
        ),
      ),
    );
  }
}

 对上面的属性做简单介绍：

  •  child: Text("Click ElevatedButton")设置按钮显示的文本为“Click ElevatedButton”。
  • onPressed：设置按钮点击事件。
  • style：使用ElevatedButton.styleFrom方法设置按钮的样式，包括背景色、文本颜色、阴影效果、最小宽度和形状等。

2024-09-07 15:44:54.993 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:56.418 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:57.601 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:44:58.044 12985-13050 flutter       I  ElevatedButton clicked
2024-09-07 15:47:37.981 12985-13050 flutter       I  ElevatedButton clicked
  static ButtonStyle styleFrom({
    Color? foregroundColor,
    Color? backgroundColor,
    Color? disabledForegroundColor,
    Color? disabledBackgroundColor,
    Color? shadowColor,
    Color? surfaceTintColor,
    Color? iconColor,
    Color? disabledIconColor,
    Color? overlayColor,
    double? elevation,
    TextStyle? textStyle,
    EdgeInsetsGeometry? padding,
    Size? minimumSize,
    Size? fixedSize,
    Size? maximumSize,
    BorderSide? side,
    OutlinedBorder? shape,
    MouseCursor? enabledMouseCursor,
    MouseCursor? disabledMouseCursor,
    VisualDensity? visualDensity,
    MaterialTapTargetSize? tapTargetSize,
    Duration? animationDuration,
    bool? enableFeedback,
    AlignmentGeometry? alignment,
    InteractiveInkFeatureFactory? splashFactory,
    ButtonLayerBuilder? backgroundBuilder,
    ButtonLayerBuilder? foregroundBuilder,
  })

去除去掉ElevatedButton边距

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            ElevatedButton(
                onPressed: () {
                  print('ElevatedButton clicked');
                },
                child: Text("Click ElevatedButton"),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  elevation: 10,
                  minimumSize: Size.zero,
                  padding: EdgeInsets.zero,
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ))
          ],
        ),
      ),
    );
  }
}

水平填充满

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            ElevatedButton(
              onPressed: () {
                print('ElevatedButton clicked');
              },
              child: Text("Click ElevatedButton"),
              style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue,
                  foregroundColor: Colors.white,
                  elevation: 10,
                  minimumSize: Size(double.infinity, 50),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10))),
            )
          ],
        ),
      ),
    );
  }
}

TextButton

  const TextButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior,
    super.statesController,
    super.isSemanticButton,
    required Widget super.child,
    super.iconAlignment,
  });

简单实现

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            TextButton(
                onPressed: () {
                  print('TextButton clicked');
                },
                autofocus: false,
                style: ButtonStyle(
                    textStyle: WidgetStateProperty.all(
                        TextStyle(fontSize: 20, color: Colors.red))),
                child: Text("Click TextButton"))
          ],
        ),
      ),
    );
  }
}

注意：上面通过 textStyle: WidgetStateProperty.all(TextStyle(fontSize: 20, color: Colors.red))来设置按钮字体颜色是无效的，发现颜色还是蓝色，而不是红色。

通过foregroundColor:WidgetStateProperty.all(Colors.yellow))才会生效。

import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            TextButton(
                onPressed: () {
                  print('TextButton clicked');
                },
                autofocus: false,
                style: ButtonStyle(
                    textStyle: WidgetStateProperty.all(
                        TextStyle(fontSize: 20, color: Colors.red)),
                    foregroundColor:
                        WidgetStateProperty.all(Colors.yellow)),
                child: Text("Click TextButton"))
          ],
        ),
      ),
    );
  }
}

设置按钮按下时，获取焦点时、默认状态时的颜色


import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            TextButton(
                onPressed: () {
                  print('TextButton clicked');
                },
                autofocus: false,
                style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(
                      const TextStyle(fontSize: 20, color: Colors.red)),
                  foregroundColor: WidgetStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.focused) &&
                          !states.contains(MaterialState.pressed)) {
                     //获取焦点时的颜色
                        return Colors.blue;
                      } else if (states.contains(MaterialState.pressed)) {
                         //按下时的颜色
                        return Colors.yellow;
                      }
                    //默认状态使用灰色
                      return Colors.black;
                    },
                  ),
                ),
                // foregroundColor:
                //     WidgetStateProperty.all(Colors.yellow)),
                child: Text("Click TextButton"))
          ],
        ),
      ),
    );

设置背景颜色 backgroundColor

import 'package:flutter/material.dart';


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            TextButton(
                onPressed: () {
                  print('TextButton clicked');
                },
                autofocus: false,
                style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(
                      const TextStyle(fontSize: 20, color: Colors.red)),
                  foregroundColor: WidgetStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.focused) &&
                          !states.contains(MaterialState.pressed)) {
                      
                        return Colors.blue;
                      } else if (states.contains(MaterialState.pressed)) {
                     
                        return Colors.yellow;
                      }
                     
                      return Colors.black;
                    },
                  ),
                  backgroundColor: WidgetStateProperty.resolveWith((states) {
                
                    if (states.contains(WidgetState.pressed)) {
                      return Colors.red;
                    }
                    
                    return null;
                  }),
                ),
                // foregroundColor:
                //     WidgetStateProperty.all(Colors.yellow)),
                child: Text("Click TextButton"))
          ],
        ),
      )

其他设置


overlayColor: 设置水波纹颜色。
padding: 设置按钮内边距。
minimumSize: 设置按钮的大小。
side: 设置边框。
shape: 外边框装饰 会覆盖 side 配置的样式

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            TextButton(
                onPressed: () {
                  print('TextButton clicked');
                },
                autofocus: false,
                style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(
                      const TextStyle(fontSize: 20, color: Colors.red)),
                  foregroundColor: WidgetStateProperty.resolveWith(
                        (states) {
                      if (states.contains(MaterialState.focused) &&
                          !states.contains(MaterialState.pressed)) {
                        return Colors.blue;
                      } else if (states.contains(MaterialState.pressed)) {
                        return Colors.yellow;
                      }

                      return Colors.black;
                    },
                  ),
                  backgroundColor: WidgetStateProperty.resolveWith((states) {
                    if (states.contains(WidgetState.pressed)) {
                      return Colors.red;
                    }

                    return null;
                  }),


                  overlayColor: WidgetStateProperty.all(Colors.red),

                  padding: WidgetStateProperty.all(EdgeInsets.all(10)),

                  minimumSize: WidgetStateProperty.all(Size(300, 100)),

                  side: WidgetStateProperty.all(
                      BorderSide(color: Colors.blue, width: 1)),

                  shape: WidgetStateProperty.all(StadiumBorder()),
                ),
                // foregroundColor:
                //     WidgetStateProperty.all(Colors.yellow)),
                child: Text("Click TextButton"))
          ],
        ),
      ),
    );
  }
}

OutlinedButton

  const OutlinedButton({
    super.key,
    required super.onPressed,
    super.onLongPress,
    super.onHover,
    super.onFocusChange,
    super.style,
    super.focusNode,
    super.autofocus = false,
    super.clipBehavior,
    super.statesController,
    required super.child,
    super.iconAlignment,
  });

 简单实现

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Button Demo"),
      ),
      body: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text("TEST Button"),
            OutlinedButton(
                onPressed: () {
                  print('OutlinedButton clicked');
                },
                child: Text('Click OutlinedButton'))
          ],
        ),
      ),
    );
  }
}

2024-09-08 11:03:01.333  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.027  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.352  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.547  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:02.709  4839-4871  flutter             I  OutlinedButton clicked
2024-09-08 11:03:40.339  4839-4871  flutter             I  OutlinedButton clicked

长按事件

                onLongPress: () {
                  print('OutlinedButton onLongPress');
                },

相关属性

textStyle             字体样式
backgroundColor       背景色
foregroundColor       字体颜色
overlayColor          高亮色，按钮处于focused, hovered,  pressed时的颜色
shadowColor           阴影颜色
elevation             阴影值
padding               padding
minimumSize           最小尺寸
side                  边框
shape                 形状
mouseCursor           鼠标指针的光标进入或者悬停在此按钮上
visualDensity         按钮布局的紧凑程度
tapTargetSize         响应触摸的区域
animationDuration     [shape]和[elevation]的动画更改的持续时间。
enableFeedback        检测到的手势是否应提供声音和/或触觉反馈。

设置字体大小（注意：这里设置颜色不会生效）

  style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30))
                ),

backgroundColor  背景色

style: ButtonStyle(
  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
  backgroundColor: WidgetStateProperty.all(Colors.red),
)

foregroundColor  字体颜色

             style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
                  backgroundColor: WidgetStateProperty.all(Colors.red),
                  foregroundColor: WidgetStateProperty.all(Colors.yellow),
                ),

overlayColor  高亮色，按钮处于focused, hovered, pressed时的颜色

style: ButtonStyle(
  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
  backgroundColor: WidgetStateProperty.all(Colors.red),
  foregroundColor: WidgetStateProperty.all(Colors.yellow),
  overlayColor: WidgetStateProperty.all(Colors.blue),
)

side  边框

         style: ButtonStyle(
                  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
                  backgroundColor: WidgetStateProperty.all(Colors.red),
                  foregroundColor: WidgetStateProperty.all(Colors.yellow),
                  overlayColor: WidgetStateProperty.all(Colors.blue),
                  side: WidgetStateProperty.all(BorderSide(width: 1,color: Colors.green)),
                )

shadowColor 阴影颜色  & elevation  阴影值

style: ButtonStyle(
  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
  backgroundColor: WidgetStateProperty.all(Colors.red),
  foregroundColor: WidgetStateProperty.all(Colors.yellow),
  overlayColor: WidgetStateProperty.all(Colors.blue),
  side: WidgetStateProperty.all(
	  BorderSide(width: 1, color: Colors.green)),
  shadowColor: WidgetStateProperty.all(Colors.black),
  elevation: WidgetStateProperty.all(10),
)

 

shape  形状

棱形

style: ButtonStyle(
  textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
  backgroundColor: WidgetStateProperty.all(Colors.red),
  foregroundColor: WidgetStateProperty.all(Colors.yellow),
  overlayColor: WidgetStateProperty.all(Colors.blue),
  side: WidgetStateProperty.all(
	  BorderSide(width: 1, color: Colors.green)),
  shadowColor: WidgetStateProperty.all(Colors.black),
  elevation: WidgetStateProperty.all(10),
  shape: WidgetStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),
)

圆角弧度   

 style: ButtonStyle(
                    textStyle: WidgetStateProperty.all(TextStyle(fontSize: 30)),
                    backgroundColor: WidgetStateProperty.all(Colors.red),
                    foregroundColor: WidgetStateProperty.all(Colors.yellow),
                    overlayColor: WidgetStateProperty.all(Colors.blue),
                    side: WidgetStateProperty.all(
                        BorderSide(width: 1, color: Colors.green)),
                    shadowColor: WidgetStateProperty.all(Colors.black),
                    elevation: WidgetStateProperty.all(10),
                    //shape: WidgetStateProperty.all(BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),
                    shape: WidgetStateProperty.all(StadiumBorder(
                        side: BorderSide(
                      style: BorderStyle.solid,
                      color: Colors.blue,
                    )))),

且听真言
关注
  • 21
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 按钮Button多样式练习
csdn_aiyang的博客
12-25 2838
目录 一、Flutter 常用的 Button 二、演示图如下 三、代码案例 四、参数详解 一、Flutter 常用的 Button RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button FlatButton：扁平化的按钮 OutlineButton：线框按钮 IconButton：图标按钮 ButtonBar：按钮组 FloatingActionButton：浮动按钮 DropdownButton：下拉框按钮 二、演示图如..
Flutter Button 按钮.dart
10-05
在 Flutter 里有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、...
Flutter Button组件
xiangxiongfly
05-30 599
基本属性 漂浮按钮，默认带有阴影和灰色背景。按下后，阴影变大。 TextButton 文本按钮，默认透明并不带阴影。按下后，会有背景色。 OutlineButton 边框按钮，默认带有边框、背景透明、不带阴影。按钮后，边框、背景、阴影会有变化。 IconButton 图标按钮，不包含文字。 带图标的按钮 ElevatedButton、TextButton、OutlineButton都有一个构造函数，可以设置图标。...
Flutter Button 实例
17 的博客
03-03 2072
本文列举一些常用的 button 效果，以便在用到的时候方便使用。因为 ElevatedButton 最常用，所以大多以 ElevatedButton 举例。
Flutter Button 按钮
蓝色的天空的博客
03-24 985
ElevatedButton 即"漂浮"按钮，它默认带有阴影和灰色背景 ElevatedButton( child: Text("normal"), onPressed: () {}, ); TextButton即文本按钮，默认背景透明并不带阴影 TextButton( child: Text("normal"), onPressed: () {}, ) IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景 IconButton( icon:
Flutter-Button的使用说明
lvsonghai的博客
02-11 2429
Flutter-Button的使用说明 1、几种Button 在flutter中，一共有七种类型的button；分别是一下几种： 1、a filled button whose material elevates when pressed. 2、FlatButton, a material design button without a shadow. 3、DropdownButton, a bu...
Flutter ButtonStyle设置圆角
wilL-my的博客
02-01 4472
ElevatedButton( child: Text( '提交', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white[300], fontSize: 14), ), onPressed: () {print("提交");} style: ButtonStyle( //圆角 s.
Flutter封装 Button
weixin_43800535的博客
02-15 625
Flutter 封装 MaterialButton
Flutter之SegmentedButton
好好学习的博客
07-03 1011
SegmentedControl和SegmentedButton
Flutter Button.dart
07-09
Flutter Button 按钮样式
flutter_progress_button:flutter_progress_button
03-15
flutter_progress_button flutter_progress_button是一个免费且开放源代码（MIT许可）的Material Flutter Button，它支持各种按钮样式要求。 它被设计为易于使用和可定制的。 开始吧 依靠它 将此添加到包的pubspec....
江西财经大学在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
仿真模拟电击穿路径的模型，可以自定义模型形状，利用有限元comsol相场法模拟，采用PDE模块自定义方程，通过求解偏微分方程来实
最新发布
09-08
仿真模拟电击穿路径的模型，可以自定义模型形状，利用有限元comsol相场法模拟，采用PDE模块自定义方程，通过求解偏微分方程来实现击穿路径的可视化。
Java课程设计-学生成绩管理系统-Swing+MySQL.zip
09-08
Java课程设计-学生成绩管理系统-Swing+MySQL.zip
中央财经大学在北京2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学2021-2024在北京各专业录取分数及最低位次
APS课程设计后端部分.zip
09-08
APS课程设计后端部分
吉林师范大学在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
华南师范大学在广东2021-2024各专业最低录取分数及位次表.pdf
09-08
全国各大学在广东省2021~2024年各专业最低录取分数及位次
flutter ButtonStyle
07-28
在Flutter中，ButtonStyle是用来自定义按钮样式的一个类。通过使用ButtonStyle，你可以修改按钮的背景颜色、文本样式、边框等属性，以创建自己需要的按钮样式。ButtonStyle可以应用于多种类型的按钮，比如ElevatedButton、TextButton和IconButton等。\[1\] 举个例子，如果你想创建一个自定义的ElevatedButton，你可以使用ButtonStyle来设置按钮的背景颜色、文本样式等。下面是一个使用ButtonStyle的示例代码： ```dart ElevatedButton( onPressed: () {}, child: Text('Custom Button'), style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(color: Colors.white)), // 其他样式属性 ), ) ``` 在上面的代码中，我们通过ButtonStyle的backgroundColor属性设置了按钮的背景颜色为蓝色，通过textStyle属性设置了按钮文本的颜色为白色。你还可以根据需要设置其他样式属性，比如边框、阴影等。 除了ElevatedButton，你也可以在TextButton和IconButton中使用ButtonStyle来自定义按钮样式。例如，下面是一个使用ButtonStyle的TextButton的示例代码： ```dart TextButton( onPressed: () {}, child: Text('Custom TextButton'), style: ButtonStyle( foregroundColor: MaterialStateProperty.all<Color>(Colors.red), // 其他样式属性 ), ) ``` 总结起来，ButtonStyle是一个用于自定义按钮样式的类，可以应用于多种类型的按钮。通过设置ButtonStyle的各种属性，你可以轻松地创建自己需要的按钮样式。\[2\]\[3\] #### 引用[.reference_title] - *1* *2* [【Flutter】关于Button 的那些知识ElevatedButton等，以及Buttonstyle](https://blog.csdn.net/weixin_43444734/article/details/128582374)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Flutter TextButton 详细使用配置、Flutter ButtonStyle样式概述实践](https://blog.csdn.net/zl18603543572/article/details/109545733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值