Flutter 按钮

2025年03月17日 | 阅读 9 分钟

按钮是图形控制元素，它 为用户提供触发事件 的能力，例如采取行动、做出选择、搜索事物等等。它们可以放置在我们的 UI 中的任何位置，例如对话框、表单、卡片、工具栏等。

按钮是 Flutter 小部件，是 Material Design 库的一部分。 Flutter 提供了几种不同形状、样式和功能的按钮。

按钮的特性

以下是 Flutter 中按钮的标准功能

我们可以轻松地在按钮上应用主题、形状、颜色、动画和行为。
我们还可以对按钮内的图标和文本进行主题设置。
按钮可以由具有不同特征的不同子小部件组成。

Flutter 按钮的类型

以下是 Flutter 中可用的不同类型的按钮

平面按钮
凸起按钮
浮动按钮
下拉按钮
图标按钮
墨水瓶按钮
弹出菜单按钮
轮廓按钮

让我们详细讨论每个按钮。

1. 平面按钮

它是一个 文本标签按钮，没有太多装饰，没有任何提升地显示。平面按钮有两个必需的属性：child 和 onPressed()。它主要用于工具栏、对话框或与其他内容内联。默认情况下，平面按钮没有颜色，其文本为黑色。但是，我们可以使用 color 和 textColor 属性分别为按钮和文本添加颜色。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter FlatButton Example'),
          ),
          body: Center(child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.all(25),
              child: FlatButton(
                child: Text('SignUp', style: TextStyle(fontSize: 20.0),),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(25),
              child: FlatButton(
                child: Text('LogIn', style: TextStyle(fontSize: 20.0),),
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),
          ]
         ))
      ),
    );
  }
}

输出

如果我们运行此应用程序，我们将看到以下屏幕

2. 凸起按钮

它是一个基于 material 小部件的按钮，并具有一个 矩形主体。它类似于平面按钮，但它 具有一个提升，当按下按钮时，提升会增加。它沿着 Z 轴为 UI 增加维度。它有几个属性，如文本颜色、形状、填充、按钮颜色、按钮在禁用时的颜色、动画时间、提升等。

此按钮有 两个回调函数。

onPressed(): 当按下按钮时触发。

onLongPress(): 当长按按钮时触发。

需要注意的是，如果未指定 onPressed() 和 onLongPressed() 回调，则此按钮处于 禁用状态。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String msg = 'Flutter RaisedButton Example';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter RaisedButton Example'),
          ),
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(msg, style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic),),
                RaisedButton(
                  child: Text("Click Here", style: TextStyle(fontSize: 20),),
                  onPressed: _changeText,
                  color: Colors.red,
                  textColor: Colors.yellow,
                  padding: EdgeInsets.all(8.0),
                  splashColor: Colors.grey,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
  _changeText() {
    setState(() {
      if (msg.startsWith('F')) {
        msg = 'We have learned FlutterRaised button example.';
      } else {
        msg = 'Flutter RaisedButton Example';
      }
    });
  }
}

输出

当我们运行此示例时，它将给出以下屏幕截图。如果我们点击 "点击这里" 按钮，它将更改文本消息。显示第二个屏幕截图。

3. 浮动操作按钮

FAB 按钮是一个 圆形图标按钮，它触发我们应用程序中的主要操作。它是当今应用程序中最常用的按钮。我们可以使用此按钮来添加、刷新或共享内容。 Flutter 建议每个屏幕最多使用一个 FAB 按钮。有两种类型的浮动操作按钮

FloatingActionButton: 它创建一个简单的圆形浮动按钮，其中包含一个子小部件。它必须有一个子参数来显示小部件。

FloatingActionButton.extended: 它创建一个带有图标和标签的宽浮动按钮。它使用标签和图标参数而不是 child。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text("FAB Button Example"),
        backgroundColor: Colors.blue,
        actions: <Widget>[
          IconButton(icon: Icon(Icons.camera_alt), onPressed: () => {}),
          IconButton(icon: Icon(Icons.account_circle), onPressed: () => {})
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.navigation),
        backgroundColor: Colors.green,
        foregroundColor: Colors.white,
        onPressed: () => {},
      ),
      /*floatingActionButton:FloatingActionButton.extended(
        onPressed: () {},
        icon: Icon(Icons.save),
        label: Text("Save"),
      ), */
    ),
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。第二张图是 FAB.extended 按钮的输出。它的编码可以在上述代码的注释部分看到。

4. 下拉按钮

下拉按钮用于在屏幕上创建一个漂亮的叠加层，允许用户从多个选项中选择任何项目。 Flutter 提供了一种简单的方法来实现下拉框或下拉按钮。此按钮显示当前选择的项目和一个箭头，该箭头会打开一个菜单，以从多个选项中选择一个项目。

Flutter 提供了 DropdownButton 小部件 来实现下拉列表。我们可以在我们的应用程序中的任何地方放置它。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: MyApp(),
));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<ListItem> _dropdownItems = [
    ListItem(1, "GeeksforGeeks"),
    ListItem(2, "Javatpoint"),
    ListItem(3, "tutorialandexample"),
    ListItem(4, "guru99")
  ];

  List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
  ListItem _itemSelected;

  void initState() {
    super.initState();
    _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
    _itemSelected = _dropdownMenuItems[1].value;
  }

  List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {
    List<DropdownMenuItem<ListItem>> items = List();
    for (ListItem listItem in listItems) {
      items.add(
        DropdownMenuItem(
          child: Text(listItem.name),
          value: listItem,
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DropDown Button Example"),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              padding: const EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                  color: Colors.greenAccent,
                  border: Border.all()),
              child: DropdownButtonHideUnderline(
                child: DropdownButton(
                    value: _itemSelected,
                    items: _dropdownMenuItems,
                    onChanged: (value) {
                      setState(() {
                        _itemSelected = value;
                      });
                    }),
              ),
            ),
          ),
          Text("We have selected ${_itemSelected.name}"),
        ],
      ),
    );
  }
}

class ListItem {
  int value;
  String name;

  ListItem(this.value, this.name);
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。第二张图是下拉按钮中包含的列表的输出。

5. 图标按钮

IconButton 是一个 印刷在 Material 小部件上的图片。它是一个有用的小部件，它使 Flutter UI 具有 Material Design 的感觉。我们还可以自定义此按钮的外观。简单来说，它是一个在用户触摸时做出反应的图标。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Icon Button Example"),
        ),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}
double _speakervolume = 0.0;

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.volume_up),
          iconSize: 50,
          color: Colors.brown,
          tooltip: 'Increase volume by 5',
          onPressed: () {
            setState(() {
              _speakervolume += 5;
            });
          },
        ),
        Text('Speaker Volume: $_speakervolume')
      ],
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。当我们按下 音量按钮 时，它将始终增加 5。

6. 墨水瓶按钮

InkWell 按钮是一个 Material Design 概念，用于 触摸响应。这个小部件属于 Material 小部件，其中墨水反应实际上是被绘制的。它通过添加手势反馈使应用程序 UI 具有交互性。它主要用于添加 飞溅涟漪效果。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _volume = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('InkWell Button Example'),
        ),
        body: Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                splashColor: Colors.green,
                highlightColor: Colors.blue,
                child: Icon(Icons.ring_volume, size: 50),
                onTap: () {
                  setState(() {
                    _volume += 2;
                  });
                },
              ),
              Text (
                  _volume.toString(),
                  style: TextStyle(fontSize: 50)
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。每次我们按下环形音量按钮时，它将增加音量 2。

7. 弹出菜单按钮

它是一个 显示菜单 的按钮，当按下它时，然后调用 onSelected 方法，该菜单被关闭。这是因为从多个选项中选择了该项目。此按钮包含文本和图像。它将主要用于设置菜单来列出所有选项。它有助于创造出色的用户体验。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() { runApp(MyApp());}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Choice _selectedOption = choices[0];

  void _select(Choice choice) {
    setState(() {
      _selectedOption = choice;
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PopupMenu Button Example'),
          actions: <Widget>[
            PopupMenuButton<Choice>(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices.skip(0).map((Choice choice) {
                  return PopupMenuItem<Choice>(
                    value: choice,
                    child: Text(choice.name),
                  );
                }).toList();
              },
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: ChoiceCard(choice: _selectedOption),
        ),
      ),
    );
  }
}

class Choice {
  const Choice({this.name, this.icon});
  final String name;
  final IconData icon;
}

const List<Choice> choices = const <Choice>[
  const Choice(name: 'Wi-Fi', icon: Icons.wifi),
  const Choice(name: 'Bluetooth', icon: Icons.bluetooth),
  const Choice(name: 'Battery', icon: Icons.battery_alert),
  const Choice(name: 'Storage', icon: Icons.storage),
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.headline;
    return Card(
      color: Colors.greenAccent,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(choice.icon, size: 115.0, color: textStyle.color),
            Text(choice.name, style: textStyle),
          ],
        ),
      ),
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。当我们点击屏幕左上角显示的 三个点 时，它将弹出多个选项。在这里，我们可以选择任何选项，它将保留在卡片中，如第二张图片所示。

8. 轮廓按钮

它类似于平面按钮，但它包含一个薄的灰色圆形矩形边框。它的轮廓边框由 shape 属性定义。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Outline Button Example'),
          ),
          body: Center(child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.all(25),
              child: OutlineButton(
                child: Text("Outline Button", style: TextStyle(fontSize: 20.0),),
                highlightedBorderColor: Colors.red,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                onPressed: () {},
              ),
            ),
            Container(
              margin: EdgeInsets.all(25),
              child: FlatButton(
                child: Text('Flat Button', style: TextStyle(fontSize: 20.0),),
                color: Colors.blueAccent,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),
          ]
          ))
      ),
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。

按钮栏

Flutter 提供了将 按钮排列在栏或行中 的灵活性。 ButtonBar 小部件包含三个属性：对齐方式、子项和 mainAxisSize。

对齐方式用于向整个按钮栏小部件呈现对齐选项。
子项属性用于获取栏中的按钮数量。
mainAxisSize 属性用于为按钮栏提供水平空间。

示例

打开 main.dart 文件并用下面的代码替换它。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter ButtonBar Example'),
        ),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.all(15),
                  child: new ButtonBar(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      RaisedButton(
                        child: new Text('Javatpoint'),
                        color: Colors.lightGreen,
                          onPressed: () {/** */},
                      ),
                      FlatButton(
                        child: Text('Flutter'),
                        color: Colors.lightGreen,
                        onPressed: () {/** */},
                      ),
                      FlatButton(
                        child: Text('MySQL'),
                        color: Colors.lightGreen,
                        onPressed: () {/** */},
                      ),
                    ],
                  ),
                ),
              ],
            )
        )
    );
  }
}

输出

在 android 模拟器中运行该应用程序，它将给出类似于以下屏幕截图的 UI。在这里，我们可以看到三个按钮放置在一个水平栏或行中。

下一主题Flutter 堆栈

Flutter 按钮

按钮的特性

Flutter 按钮的类型

1. 平面按钮

2. 凸起按钮

3. 浮动操作按钮

4. 下拉按钮

5. 图标按钮

6. 墨水瓶按钮

7. 弹出菜单按钮

8. 轮廓按钮

按钮栏

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 按钮

按钮的特性

Flutter 按钮的类型

1. 平面按钮

2. 凸起按钮

3. 浮动操作按钮

4. 下拉按钮

5. 图标按钮

6. 墨水瓶按钮

7. 弹出菜单按钮

8. 轮廓按钮

按钮栏

相关帖子

Flutter 主题

Flutter 日历

Flutter 弹窗

Flutter 动画

Flutter Tooltip

Flutter 文本字段

Flutter 开关

Flutter 表单

Flutter 图片

Flutter Container

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器