Flutter 按钮 - 芒果文档

📌 相关文章

📜 Flutter 按钮

📅 最后修改于: 2021-01-02 04:59:16 🧑 作者: Mango

颤振按钮

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

按钮是Flutter小部件，它是材料设计库的一部分。 Flutter提供了几种类型的按钮，它们具有不同的形状，样式和功能。

按钮功能

Flutter中按钮的标准功能如下：

我们可以轻松地将主题应用于按钮，形状，颜色，动画和行为。
我们还可以在按钮内添加主题图标和文本。
按钮可以由具有不同特征的不同子控件组成。

颤动按钮的类型

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

平面按钮
凸起按钮
浮动按钮
下拉按钮
图标按钮
墨well按钮
PopupMenu按钮
轮廓按钮

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

1.平面按钮

这是一个文本标签按钮，装饰不多，显示时没有任何高程。扁平按钮具有两个必需的属性： child和onPressed() 。它主要用于工具栏，对话框或与其他内容内联。默认情况下，平面按钮没有颜色，并且其文本为黑色。但是，我们可以分别对按钮使用color和对文本使用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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter FlatButton Example'),
          ),
          body: Center(child: Column(children: [
            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.凸起按钮

这是一个按钮，它基于材质小部件并具有矩形主体。它类似于平面按钮，但是其高程将在按下按钮时增加。沿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 {
  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';
      }
    });
  }
}

输出：

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

3.浮动操作按钮

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

FloatingActionButton：它创建一个带有子小部件的简单圆形浮动按钮。它必须具有子参数才能显示小部件。

FloatingActionButton.extended：它创建一个宽的浮动按钮以及其中的图标和标签。它使用标签和图标参数代替孩子。

例：

打开main.dart文件，并将其替换为以下代码。

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text("FAB Button Example"),
        backgroundColor: Colors.blue,
        actions: [
          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 {
  List _dropdownItems = [
    ListItem(1, "GeeksforGeeks"),
    ListItem(2, "Javatpoint"),
    ListItem(3, "tutorialandexample"),
    ListItem(4, "guru99")
  ];

  List> _dropdownMenuItems;
  ListItem _itemSelected;

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

  List> buildDropDownMenuItems(List listItems) {
    List> 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: [
          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是打印在“材质”小部件上的图片。这是一个有用的小部件，可为Flutter UI带来实质性的设计感。我们还可以自定义此按钮的外观。简单来说，它是一个图标，当用户触摸它时会做出反应。

例：

打开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 {
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        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按钮是一种材料设计概念，用于触摸响应。该小部件位于“材料”小部件下，在此实际绘制墨水反应。它通过添加手势反馈来交互式创建应用程序UI。它主要用于增加飞溅波纹效果。

例：

打开main.dart文件，并将其替换为以下代码。

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State {
  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: [
              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. PopupMenu按钮

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

例：

打开main.dart文件，并将其替换为以下代码。

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State {
  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: [
            PopupMenuButton(
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices.skip(0).map((Choice choice) {
                  return PopupMenuItem(
                    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 choices = const [
  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: [
            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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Outline Button Example'),
          ),
          body: Center(child: Column(children: [
            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小部件包含三个属性： alignment，children和mainAxisSize 。

对齐用于将对齐选项呈现给整个按钮栏小部件。
Children属性用于获取栏中的按钮数量。
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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter ButtonBar Example'),
        ),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.all(15),
                  child: new ButtonBar(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      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。在这里，我们可以看到三个按钮被放置在水平条或行中。