Flutter网格按钮布局插件flutter_grid_button的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter网格按钮布局插件flutter_grid_button的使用

flutter_grid_button 是一个用于在Flutter中创建网格布局按钮的插件。它对于制作数字键盘、计算器等非常有用。

开始使用

添加依赖

要在项目中使用此插件，首先需要在 pubspec.yaml 文件中添加 flutter_grid_button 作为依赖：

dependencies:
  flutter_grid_button:

导入库

然后，在你的Dart文件中导入这个库：

import 'package:flutter_grid_button/flutter_grid_button.dart';

示例代码

下面是一个完整的示例应用程序，展示了如何使用 GridButton 创建一个类似计算器的界面。

import 'package:flutter/material.dart';
import 'package:flutter_grid_button/flutter_grid_button.dart';

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

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  final _focusNode = FocusNode(canRequestFocus: false, skipTraversal: true);

  @override
  Widget build(BuildContext context) {
    const textStyle = TextStyle(fontSize: 26);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GridButton'),
        ),
        body: Builder(builder: (context) {
          return Padding(
            padding: const EdgeInsets.all(18.0),
            child: GridButton(
              textStyle: textStyle,
              borderColor: Colors.grey[300],
              borderWidth: 2,
              onPressed: (dynamic val) {
                _focusNode.requestFocus();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text(val.toString()),
                    duration: const Duration(milliseconds: 400),
                  ),
                );
              },
              items: [
                [
                  GridButtonItem(
                    title: "Black",
                    color: Colors.black,
                    textStyle: textStyle.copyWith(color: Colors.white),
                  ),
                  GridButtonItem(
                    title: "Red",
                    color: Colors.red,
                    textStyle: textStyle.copyWith(color: Colors.white),
                  ),
                ],
                [
                  GridButtonItem(
                      child: const Icon(
                        Icons.image_outlined,
                        size: 50,
                      ),
                      focusNode: _focusNode,
                      textStyle: textStyle.copyWith(color: Colors.white),
                      value: 'image',
                      color: Colors.blue,
                      shape: const BorderSide(width: 4),
                      borderRadius: 30)
                ],
                [
                  const GridButtonItem(title: "7"),
                  const GridButtonItem(title: "8"),
                  const GridButtonItem(title: "9"),
                  GridButtonItem(title: "×", color: Colors.grey[300]),
                ],
                [
                  const GridButtonItem(title: "4"),
                  const GridButtonItem(title: "5"),
                  const GridButtonItem(title: "6"),
                  GridButtonItem(title: "-", color: Colors.grey[300]),
                ],
                [
                  const GridButtonItem(title: "1"),
                  const GridButtonItem(title: "2"),
                  const GridButtonItem(title: "3"),
                  GridButtonItem(title: "+", color: Colors.grey[300]),
                ],
                [
                  const GridButtonItem(title: "0"),
                  const GridButtonItem(
                      title: "000", flex: 2, longPressValue: 400),
                  GridButtonItem(title: "=", color: Colors.grey[300]),
                ],
              ],
            ),
          );
        }),
      ),
    );
  }
}

参数说明

  • textStyle: 设置按钮文本的样式。
  • borderColor: 设置按钮边框的颜色。
  • borderWidth: 设置按钮边框的宽度。
  • onPressed: 按钮点击事件的回调函数，接收点击按钮的值。
  • items: 定义网格中的按钮项，每个子列表代表一行，每个 GridButtonItem 对象代表一个按钮。

通过上述步骤和示例代码，你可以在自己的Flutter项目中轻松地使用 flutter_grid_button 插件来创建美观且功能强大的网格按钮布局。


更多关于Flutter网格按钮布局插件flutter_grid_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网格按钮布局插件flutter_grid_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 flutter_grid_button 插件在 Flutter 中创建网格按钮布局的示例代码。首先，你需要确保在 pubspec.yaml 文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_grid_button: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例，展示了如何使用 flutter_grid_button 插件：

import 'package:flutter/material.dart';
import 'package:flutter_grid_button/flutter_grid_button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Grid Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GridButtonScreen(),
    );
  }
}

class GridButtonScreen extends StatelessWidget {
  final List<String> buttonTexts = [
    'Button 1', 'Button 2', 'Button 3',
    'Button 4', 'Button 5', 'Button 6',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid Button Layout'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,  // 每行2列
            crossAxisSpacing: 8.0,
            mainAxisSpacing: 8.0,
          ),
          itemCount: buttonTexts.length,
          itemBuilder: (BuildContext context, int index) {
            return GridButton(
              text: buttonTexts[index],
              onPressed: () {
                // 按钮点击回调
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Clicked: ${buttonTexts[index]}')),
                );
              },
              color: Colors.blue,
              textColor: Colors.white,
              borderRadius: BorderRadius.circular(10.0),
              elevation: 5.0,
            );
          },
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们定义了一个 MyApp 入口类，该类使用 MaterialApp 包装整个应用。
  2. GridButtonScreen 是我们的主屏幕，它包含一个 GridView.builder 用于构建网格布局。
  3. GridView.builder 的 gridDelegate 属性使用 SliverGridDelegateWithFixedCrossAxisCount 来设置网格布局，每行2列，并定义了列间距和行间距。
  4. itemBuilder 属性用于构建每个网格项，这里我们使用 GridButton 小部件。
  5. GridButton 的 text 属性设置按钮的文本，onPressed 属性设置按钮点击时的回调。
  6. color 和 textColor 属性用于设置按钮的背景色和文本颜色。
  7. borderRadius 和 elevation 属性用于设置按钮的圆角半径和阴影。

这个示例展示了如何使用 flutter_grid_button 插件创建一个简单的网格按钮布局，并处理按钮点击事件。你可以根据实际需求调整按钮数量、样式和回调逻辑。

回到顶部