Flutter通用按钮组件插件common_button的使用

Flutter通用按钮组件插件common_button的使用

在Flutter项目中，经常需要使用到自定义的通用按钮。common_button插件可以方便地创建这样的按钮。

功能特性

common_button

• 如何使用它
• 参数

如何使用它

common_button

默认效果为 Icons.favorite

CommonButton(),
// 给一些参数

你还可以定义自定义的用法：

CommonButton(
    onPress: _incrementCounter,
    text: "Counter",
    textAlign: Alignment.center,
    tColor: Colors.white,
    bgColor: Colors.orange,
    isIcon: false,
    customShape: 1,
),

参数

示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中使用common_button插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用并输入"flutter run"。你会看到一个带有蓝色工具栏的应用。
        // 然后，在不退出应用的情况下，尝试将primarySwatch改为Colors.green，并触发"热重载"（在控制台按"r"键，或直接保存更改来触发热重载）。
        // 注意，计数器并没有重置回零；应用并没有重新启动。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的主页。它是有状态的，意味着它有一个包含影响其外观的字段的状态对象。
  // 这个类是状态的配置。它保存了由父级提供的值（在这个例子中是标题），并在构建方法中使用这些值。
  // 小部件子类中的字段总是标记为"final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用setState告诉Flutter框架某些事情已经改变，这会导致它重新运行构建方法以反映更新后的值。
      // 如果我们不调用setState而只是改变了_counter，那么构建方法就不会被再次调用，因此什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次setState被调用时，这个方法都会被重新运行，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架已经被优化，使得重建方法变得快速，这样你就可以重建任何需要更新的东西，而不是逐个改变小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 在这里，我们从MyHomePage对象中获取值，该对象是由App.build方法创建的，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其放置在父元素的中间。
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: CommonButton(
                onPress: _incrementCounter,
                text: "Counter",
                textAlign: Alignment.center,
                tColor: Colors.white,
                bgColor: Colors.orange,
                isIcon: false,
                customShape: 1,
              ),
            ),
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个尾随的逗号使自动格式化更美观。
    );
  }
}