Flutter多项选择插件plural_selectable的使用

Flutter多项选择插件plural_selectable的使用

Plural Selectable

• 您现在可以在模型中进行多选。您还可以通过自定义此选择样式来创建自己的小部件。

• 首先，您必须有一个模型，并且在该模型中需要一个变量。让我们通过一个例子来解释：

• 例如，您有一个 Map。在这个模型中必须有一个列表结构，如果没有列表，您会遇到错误。即使您的列表为空也没关系。这个列表中有不同的模型。需要注意的是，这个列表模型中的不同结构必须彼此区分，并且每个结构都必须有一个 id 变量。通过这个 id，可以轻松地判断它是否被选中。

• 记住，每个列表中的 id 必须是不同的。

安装

在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  plural_selectable: <latest_version>

开始使用

首先，我们需要定义一个模型。例如：

{
    "name":"--",
    "list":[
        {
            "id":1,
            "name": "---",
            "value": "---",
        },
         {
             "id":2,
            "name": "---",
            "value": "---",
        }
    ],
}

然后，在 Dart 中定义模型列表：

List<SelectModel> modelList = [
  SelectModel(id: 0, name: "test 1 select", list: [
    InnerSelectModel(id: 0, value: "test 1 inner"),
    InnerSelectModel(id: 1, value: "test 2 inner"),
    InnerSelectModel(id: 2, value: "test 3 inner"),
  ]),
  SelectModel(id: 1, name: "test 1 select", list: [
    InnerSelectModel(id: 3, value: "test 3 inner"),
    InnerSelectModel(id: 4, value: "test 4 inner"),
    InnerSelectModel(id: 5, value: "test 5 inner"),
  ]),
];

接着，在小部件中指定哪个列表是可以选择的：

Selectable<Map>(
  selectList: map,
  innerList: (model) => model["list"],
  // 这个模型返回您的原始模型并等待您显示可选择的列表。
  // 每个模型通过遍历您的列表结构返回。
  builder: (context, model) {
    return SelectableHeader(
      title: Text("${model["name"]}"),
    );
  },
  innerBuilder: (context, inner, index) {
    return InnerSelect(
      leading: Text("${inner[index]["value"]}"),
    );
  },
  onSelect: (model, isSelect) {},
  selected: selected,
)

已选项目

如果您在模型中有之前已选择的结构，并且您希望在小部件中显示它们已被选择：

selected: [1,3,5]

如上所示，您可以指定已选择的项目作为列表。

完整示例代码如下：

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

在 HomeScreen 小部件中使用 Selectable：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<int> selected = [1, 3, 5];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Selectable Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Selectable<SelectModel>(
          parentList: modelList,
          childList: (model) => model.list,
          builder: (context, model, isSlected) {
            return SelectableParent(
              decoration: BoxDecoration(
                color: isSlected ? Colors.green[400] : Colors.red,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Stack(
                children: [
                  Positioned(
                    bottom: 4.0,
                    left: 3.0,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "Plural Selectable",
                          style: TextStyle(
                            color: isSlected ? Colors.white : Colors.black,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          "Plural Selectable",
                          style: TextStyle(
                            color: isSlected ? Colors.white : Colors.black45,
                            fontSize: 13.0,
                            fontWeight: FontWeight.w300,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );
          },
          childBuilder: (context, inner, index, isSelected) {
            debugPrint("Check $isSelected");
            return SelectableChild(
              selected: isSelected,
              leading: Text(
                "${inner[index].value}",
                style: TextStyle(
                  color: isSelected ? Colors.white : Colors.black,
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              suffixIcon: const Icon(
                Icons.done,
                color: Colors.white,
              ),
              margin: const EdgeInsets.symmetric(horizontal: 30.0, vertical: 5.0),
            );
          },
          onSelect: (selectedId, isSelect) {
            debugPrint("Seçili olan id : $selectedId değeri : $isSelect");
          },
          selectedList: selected,
        ),
      ),
    );
  }
}