Flutter插件caixa的介绍与使用方法详解

为什么使用 Caixa 包？

你好，开发者们！在 Flutter 中，有一个可以简化你开发工作的包：Caixa 包。你可能已经熟悉了 Container 这个非常灵活的 widget。然而，我们创建的 Caixa 包具有一些优势，可以使你的代码更加简洁和可重用。让我们一起来探索这些优势！

使用 Molde 类进行配置的重用

Caixa 包使用了一个名为 Molde 的辅助类，允许定义一组默认属性。这对于有多个样式相似的盒子时特别有用。通过 Molde，你可以创建一个模板并将其重用于多个 Caixa 实例，节省时间和精力。

var moldeButton = Molde(
  height: 80,
  width: 150,
  color: const Color(0xFF00838F),
  borderRadius: BorderRadius.circular(5),
  boxShadow: const [
    BoxShadow(
      blurRadius: 10,
      color: Color.fromARGB(96, 0, 0, 0)
    )
  ],
);

使用 onTap 属性轻松处理点击事件

与 Container 不同的是，Caixa 包支持内置的点击事件处理（onTap）。这意味着你可以直接在 Caixa 上添加点击事件，而无需手动包裹 GestureDetector 或 InkWell。这使得代码更加整洁和易于理解。

Caixa(
  molde: moldeButton,  
  onTap: () {
    print("Botão 01");
  },                 
  child: const Center(
    child: Text("Botão 01",
      style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
  ),
),

扩展属性以实现更详细的定制

Caixa 包扩展了 Container 提供的许多属性，并且以一种方式使自定义更加详细和灵活。所有装饰相关的属性都可以直接在 Caixa 类中配置。

Caixa(
  height: 80,
  width: 150,
  color: const Color(0xFFD81B60),
  borderRadius: BorderRadius.circular(5),
  boxShadow: const [
    BoxShadow(
      blurRadius: 10,
      color: Color.fromARGB(96, 0, 0, 0)
    )
  ],
  child: const Center(
    child: Text("Caixa", 
      style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
  ),
),

简化动画效果的应用

使用 Caixa 包，可以轻松地添加触摸反馈效果（如 splash effects），通过 splashColor 属性来实现。这为用户提供了即时的视觉反馈，当 Caixa 被点击时，从而改善用户体验。

安装

要使用该包，请在项目的根目录下运行以下命令：

$ flutter pub add caixa

然后在 Dart 文件中导入该包：

import 'package:caixa/caixa.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用 Molde 创建按钮：

import 'package:caixa/caixa.dart';
import 'package:flutter/material.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(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

  var moldeButton = Molde(
      height: 80,
      width: 150,
      color: const Color(0xFF00838F),
      borderRadius: BorderRadius.circular(5),
      boxShadow: const [
        BoxShadow(
          blurRadius: 10,
          color: Color.fromARGB(96, 0, 0, 0)
        )
      ],
  );

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Caixa(
                    height: 80,
                    width: 150,
                    color: const Color(0xFFD81B60),
                    borderRadius: BorderRadius.circular(5),
                    boxShadow: const [
                      BoxShadow(
                        blurRadius: 10,
                        color: Color.fromARGB(96, 0, 0, 0)
                      )
                    ],
                    child: const Center(
                      child: Text("Caixa", style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
                    ),
                  ),
                  Container(
                    height: 80,
                    width: 150,
                    decoration: BoxDecoration(
                        color: const Color(0xFFD81B60),
                        borderRadius: BorderRadius.circular(5),
                        boxShadow: const [
                          BoxShadow(
                            blurRadius: 10,
                            color: Color.fromARGB(96, 0, 0, 0)
                          )
                        ],
                    ),
                    child: const Center(
                      child: Text("Container", style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(5),
              child:  Text("Using templates in Caixa to create buttons", style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 39, 39, 39))),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Caixa(
                    molde: moldeButton,  
                    onTap: () {
                      print("Button 01");
                    },                 
                    child: const Center(
                      child: Text("Button 01", style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
                    ),
                  ),
                  Caixa(
                    molde: moldeButton,  
                    onTap: () {
                      print("Button 02");
                    },                  
                    child: const Center(
                      child: Text("Button 02", style:  TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Color.fromARGB(255, 230, 230, 230))),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}