flutter-Button

Chen_ShengJie

已于 2022-08-09 23:14:59 修改

阅读量5.6k

点赞数 1

分类专栏： flutter 文章标签： flutter android

于 2022-03-17 17:45:46 首次发布

本文链接：https://blog.csdn.net/csj731742019/article/details/123556158

版权

flutter 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Flutter中的ElevatedButton，包括其默认效果、圆角设置、边框颜色、背景颜色、字体颜色、尺寸设定、对齐方式、阴影和高亮色等，并列举了OutlinedButton和TextButton对比。适合深入理解Flutter按钮设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElevatedButton

即"漂浮"按钮，它默认带有阴影和灰色背景。按下后，阴影会变大

圆角设置

 ElevatedButton(
   style: ButtonStyle(
     shape: MaterialStateProperty.all(RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(20)))),
        onPressed: (() {}),
        child: Text("ElevatedButton"),
   )

边框颜色和宽度

 ElevatedButton(
     style: ButtonStyle(
     side: MaterialStateProperty.all(
      BorderSide(color: Colors.red,width: 4))),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

设置按钮背景

ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.yellow)),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

设置按钮字体颜色

 ElevatedButton(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.yellow)),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

指定按钮的宽高

  ElevatedButton(
                  style: ButtonStyle(
                   fixedSize:MaterialStateProperty.all(Size(200,300))),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

只指定宽

fixedSize:MaterialStateProperty.all(Size.fromWidth(200))),

只指定高

fixedSize:MaterialStateProperty.all(Size.fromHeight(300))),

minimumSize和maximumSize 显示按钮的最小或最大的尺寸，fixedSize任受它们的约束

 ElevatedButton(
                  style: ButtonStyle(
                   fixedSize:MaterialStateProperty.all(Size.fromWidth(300))
                   ,maximumSize: MaterialStateProperty.all(Size.fromWidth(100))),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

最大宽度设置100，但实际宽度设置300，最终显示100的宽度

设置按钮字体大小

                ElevatedButton(
                  style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30)),
                   ),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

设置按钮内间距

在上面设置字体大小为30的前提下

                ElevatedButton(
                  style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30)),
                    padding: MaterialStateProperty.all(EdgeInsets.all(30)),
                   ),
                  onPressed: (() {}),
                  child: Text("ElevatedButton"),
                )

在指定宽度的前提下，设置按钮里面文字显示的位置

按钮里文字右边居中显示：

 ElevatedButton(
                  style: ButtonStyle(
                    alignment:Alignment.centerRight,
                    fixedSize: MaterialStateProperty.all(Size.fromWidth(300))
                   ),
                  onPressed: (() {}),
                  child: Text("Button"),
                )

按钮里文字左边居中显示：

  ElevatedButton(
                  style: ButtonStyle(
                    alignment:Alignment.centerLeft,
                    fixedSize: MaterialStateProperty.all(Size.fromWidth(300))
                   ),
                  onPressed: (() {}),
                  child: Text("Button"),
                )

Alignment属性

/// The top left corner.
  static const Alignment topLeft = Alignment(-1.0, -1.0);


  /// The center point along the top edge.
  static const Alignment topCenter = Alignment(0.0, -1.0);


  /// The top right corner.
  static const Alignment topRight = Alignment(1.0, -1.0);


  /// The center point along the left edge.
  static const Alignment centerLeft = Alignment(-1.0, 0.0);


  /// The center point, both horizontally and vertically.
  static const Alignment center = Alignment(0.0, 0.0);


  /// The center point along the right edge.
  static const Alignment centerRight = Alignment(1.0, 0.0);


  /// The bottom left corner.
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);


  /// The center point along the bottom edge.
  static const Alignment bottomCenter = Alignment(0.0, 1.0);


  /// The bottom right corner.
  static const Alignment bottomRight = Alignment(1.0, 1.0);

阴影颜色，来点青青草原色

 ElevatedButton(
                  style: ButtonStyle(
                  shadowColor:MaterialStateProperty.all(Colors.green)
                   ),
                  onPressed: (() {}),
                  child: Text("Button"),
                )

不是很明显

elevation // 阴影值

ElevatedButton(
                  style: ButtonStyle(
                  elevation :   MaterialStateProperty.all(10),            
                  shadowColor:MaterialStateProperty.all(Colors.red)
                   ),
                  onPressed: (() {}),
                  child: Text("Button"),
                )

现在明显多了

overlayColor 高亮色按下时候的颜色

 ElevatedButton(
              style: ButtonStyle(
                overlayColor: MaterialStateProperty.all(Colors.red),
              ),
              onPressed: (() {}),
              child: Text("Button"),
            )

OutlinedButton

  OutlinedButton(
      onPressed: (() {}),
     child: Text("OutlinedButton"),
    )

TextButton

 TextButton(
      onPressed: (() {}),
       child: Text("TextButton"),
      )

附上官网地址：ButtonStyle class - material library - Dart API