Flutter文本选择插件selectable_box的使用

SelectableBox 是一个用于在Flutter应用中创建可选择框的插件。它提供了许多自定义选项，可以将任何小部件转换为可选择的框。

安装

首先，在项目的 pubspec.yaml 文件中添加 selectable_box 依赖：

dependencies:
  selectable_box: ^1.0.8

然后运行 flutter pub get 来安装该插件。

使用

导入 selectable_box 插件：

import 'package:selectable_box/selectable_box.dart';

接下来，可以在你的小部件树中使用 SelectableBox：

示例代码

以下是一个完整的示例 demo，展示了如何使用 SelectableBox 小部件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isSelected_1 = false;
  bool isSelected_2 = false;
  bool isSelected_3 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: ListView(
        children: [
          Column(
            children: [
              const SizedBox(height: 20),
              const Center(
                child: Text(
                  'Selectable Box',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 20),
              SelectableBox(
                height: 250,
                width: 400,
                onTap: () {
                  setState(() {
                    isSelected_1 = !isSelected_1;
                  });
                },
                isSelected: isSelected_1,
                child: const Image(
                  image: AssetImage('assets/images/1.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              SelectableBox(
                height: 250,
                width: 400,
                onTap: () {
                  setState(() {
                    isSelected_2 = !isSelected_2;
                  });
                },
                isSelected: isSelected_2,
                child: const Image(
                  image: AssetImage('assets/images/2.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              SelectableBox(
                height: 250,
                width: 400,
                onTap: () {
                  setState(() {
                    isSelected_3 = !isSelected_3;
                  });
                },
                isSelected: isSelected_3,
                child: const Image(
                  image: AssetImage('assets/images/3.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

参数说明

• height: 盒子的高度。
• width: 盒子的宽度。
• color: 盒子未选中时的颜色。
• selectedColor: 盒子选中时的颜色。
• borderColor: 边框颜色（未选中时）。
• selectedBorderColor: 边框颜色（选中时）。
• borderWidth: 边框宽度。
• borderRadius: 圆角半径。
• padding: 内边距。
• animationDuration: 动画持续时间。
• opacity: 未选中时的透明度。
• selectedOpacity: 选中时的透明度。
• checkboxAlignment: 复选框对齐方式。
• checkboxPadding: 复选框内边距。
• selectedIcon: 选中状态下的图标。
• unSelectedIcon: 未选中状态下的图标。
• showCheckbox: 是否显示复选框。
• onTap: 点击事件处理函数。
• isSelected: 当前是否被选中。
• child: 盒子中的子组件。

通过这些参数，你可以根据需要自定义 SelectableBox 的外观和行为。希望这个示例能够帮助你更好地理解和使用 selectable_box 插件。