『Flutter』常用组件按钮、图片

程序员 NEO

发布于 2025-03-07 09:23:59

8400

代码可运行

文章被收录于专栏：前端必修课前端必修课

运行总次数：0

代码可运行

1.前言

经过『Flutter』布局组件 Container、Row、Column、Stack上一篇文章的学习，我们大家可以了解到布局相关的组件，但是在实际开发中，我们还需要使用到其他的组件，比如按钮、图片、文本、输入框等等，这些组件都是我们在开发中经常使用的，所以本篇文章我们就来学习一下这些常用组件。

2.常用组件

在Flutter中，有多种按钮组件可以用于创建交互式界面。主要的按钮组件包括：

1. ElevatedButton：这是一个凸起的按钮，常用于主要的操作。它有默认的阴影和灰度效果，当按下时会有视觉反馈。
2. FlatButton（现在称为TextButton）：这是一个无阴影的平面按钮，通常用于不太重要的操作。它在按下时不会改变外观，提供简洁的视觉效果。
3. OutlineButton（现在称为OutlinedButton）：这个按钮有一个边框，但没有背景色。当按下时，边框和文字颜色会变化，适用于需要强调边框而非背景色的场景。
4. IconButton：这是一个图标按钮，常用于工具栏和对话框中。它可以包含图标而不是文本，适用于空间有限或需要图形化表示的地方。
5. FloatingActionButton：这是一个圆形的按钮，通常悬浮在内容上方，用于促进应用中的主要动作，如添加、编辑等。
6. MaterialButton：这是一个更通用的按钮组件，可以高度自定义，包括形状、颜色、阴影等。
7. DropdownButton：这是一个下拉按钮，允许用户从一系列项中选择一个。通常用于表单或需要选择性输入的界面。
8. PopupMenuButton：这个按钮在用户点击时会显示一个弹出菜单。它常用于应用的工具栏中，提供额外的选项。
9. InkWell：虽然不是一个标准的按钮组件，但它可以用来给几乎任何widget添加水波纹效果，从而制作自定义按钮。

然后我分别编写了这些按钮的示例代码, 有几个演示不了，需要给大家介绍了有无状态组件之后再来演示。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextButton(
                onPressed: () {
                  // 按钮点击事件
                  print("Text Button 1");
                },
                child: Text('Text Button'),
              ),
              ElevatedButton(
                onPressed: () {
                  // 按钮点击事件
                  print("Elevated Button 2");
                },
                child: Text('Elevated Button'),
              ),
              OutlinedButton(
                onPressed: () {
                  // 按钮点击事件
                  print("Outlined Button 3");
                },
                child: Text('Outlined Button'),
              ),
              IconButton(
                icon: Icon(Icons.star),
                onPressed: () {
                  // 按钮点击事件
                  print("IconButton Button 4");
                },
              ),
              FloatingActionButton(
                onPressed: () {
                  // 按钮点击事件
                  print("FloatingActionButton Button 5");
                },
                child: Icon(Icons.add),
              ),
              PopupMenuButton<String>(
                onSelected: (String result) {
                  // 处理选择结果
                },
                itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                  const PopupMenuItem<String>(
                    value: 'Value1',
                    child: Text('Menu item 1'),
                  ),
                  const PopupMenuItem<String>(
                    value: 'Value2',
                    child: Text('Menu item 2'),
                  ),
                ],
              )
            ],
          )
      )
    )
  );
}

3.onLongPress

在 Flutter 中，TextButton 组件的 onLongPress 属性允许你定义一个回调函数，当用户长按按钮时会被触发。这可以用于添加额外的功能或交互，与简单的点击（onPressed）不同。

示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextButton(
                onPressed: () {
                  // 按钮点击事件
                  print("Text Button 1");
                },
                onLongPress: () => {
                  print("Button Long Pressed")
                },
                child: Text('Text Button'),
              ),
            ],
          )
      )
    )
  );
}

在这个示例中：

• 当 TextButton 被点击时，onPressed 会被触发
• 当 TextButton 被长按时，onLongPress 会被触发

4.Icon

Flutter 中的 Icon 组件用于显示 Material 设计风格的图标。

常见属性及其作用：

1. icon (IconData): 必需的属性，用于指定要显示的图标。通常从 Icons 类中选择一个图标。
2. size (double): 图标的大小。默认大小是 24.0。
3. color (Color): 图标的颜色。
4. semanticLabel (String): 用于辅助技术的标签。如果图标不仅仅是装饰性的，这个标签可以提供关于图标的更多信息。
5. textDirection (TextDirection): 图标的文本方向。这对于一些图标（如箭头）非常重要，其方向可能会因语言的阅读方向（从左到右或从右到左）而改变。

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(
                Icons.favorite,
                size: 50.0,
                color: Colors.red,
              ),
              Icon(
                Icons.alarm,
                color: Colors.blue,
                semanticLabel: 'Alarm Icon',
              ),
              Icon(
                Icons.arrow_back,
                size: 30.0,
                textDirection: TextDirection.rtl,
              ),
            ],
          )
      )
    )
  );
}

5.图片组件

在 Flutter 中，用于显示图片的主要组件是 Image。这个组件提供了多种构造函数来从不同来源加载和显示图片，包括网络、本地文件、资源等。

常用的 Image 组件属性及其作用：

1. image (ImageProvider): 图片的来源。可以是网络 (NetworkImage), 文件 (FileImage), 资源 (AssetImage) 等。
2. width (double): 图片的宽度。如果不设置，图片会根据其父组件和其他内容自动调整大小。
3. height (double): 图片的高度。同样，如果不设置，会自动调整。
4. fit (BoxFit): 如何处理图片的缩放和对齐。常用的值有 BoxFit.fill, BoxFit.contain, BoxFit.cover 等。
5. alignment (AlignmentGeometry): 图片在容器内的对齐方式。
6. repeat (ImageRepeat): 如果图片小于其容器，如何重复填充。可能的值有 ImageRepeat.noRepeat, ImageRepeat.repeat, ImageRepeat.repeatX, ImageRepeat.repeatY 等。
7. color 和 colorBlendMode (Color 和 BlendMode): 可以给图片应用颜色滤镜和混合模式。

使用 Image 组件：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    // 应用程序的标题，显示在任务管理窗口中。
      title: "my App",
      // 应用程序的主题，用于定义颜色，字体和阴影等。接受一个 ThemeData 对象
      theme: ThemeData(primarySwatch: Colors.blue),
      // 应用的首页
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: const Text('首页'),
            centerTitle: true,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.network(
                'https://images.cnblogs.com/cnblogs_com/BNTang/1812554/o_210513114744blogImage.jpg',
                width: 200,
                height: 200,
                fit: BoxFit.cover,
                alignment: Alignment.center,
              ),
            ],
          )
      )
    )
  );
}

运行效果如下：