Flutter模态搜索框插件modal_searchbox的使用

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

Flutter模态搜索框插件modal_searchbox的使用

该插件用于创建带有搜索框的TextField，并支持模态框或底部弹出框作为选择器。

Pub.Dev

您可以从以下链接找到此插件： https://pub.dev/packages/modal_searchbox

使用

要使用此插件，需要在pubspec.yaml文件中添加依赖项：

dependencies:
  modal_searchbox: ^x.x.x

示例

演示

演示1 演示2

代码示例

void main() => runApp(const App());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  final listCountry = const [
    "Indonesia",
    "Japan",
    "Korea",
    "United States",
    "Germany",
    "Australia",
    "China",
    "India",
    "Thailand",
    "Vietnam"
  ];
  String selectedCountry = "Indonesia";
  List<String> selectedMultipleCountry = [];

  MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Modal Searchbox Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Center(
            child: Column(children: [
          // 单选模式
          ModalSearchbox(
              padding: const EdgeInsets.all(0),
              label: "Select Country",
              selectedValue: selectedCountry,
              list: listCountry,
              contentPadding: const EdgeInsets.symmetric(vertical: 3),
              onChanged: (v) {
                selectedCountry = v;
              }),
          const SizedBox(height: 16),
          // 多选模式
          ModalSearchbox(
              padding: const EdgeInsets.all(0),
              label: "Select Multiple Country",
              isMultipleSelect: true,
              selectedMutipleValue: selectedMultipleCountry,
              list: listCountry,
              contentPadding: const EdgeInsets.symmetric(vertical: 5),
              onChanged: (newValue) {
                selectedMultipleCountry = newValue;
              })
        ])),
      ),
    );
  }
}

更多关于Flutter模态搜索框插件modal_searchbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter模态搜索框插件modal_searchbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用modal_searchbox插件的示例代码。这个插件允许你在应用中实现模态搜索框功能。

首先，确保你已经在pubspec.yaml文件中添加了modal_searchbox依赖：

dependencies:
  flutter:
    sdk: flutter
  modal_searchbox: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，下面是一个完整的示例代码，展示了如何在Flutter应用中使用modal_searchbox插件：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List<String>.generate(100, (i) => "Item $i");
  String? selectedItem;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Modal SearchBox Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedItem ?? 'Select an item from the search box',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showModalSearchBox<String>(
                  context: context,
                  items: items,
                  searchFieldLabel: 'Search...',
                  selectedItem: selectedItem,
                  onChanged: (value) {
                    setState(() {
                      selectedItem = value;
                    });
                  },
                );
              },
              child: Text('Open SearchBox'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • 导入flutter/material.dart和modal_searchbox/modal_searchbox.dart。

  2. 主应用：

    • MyApp是主应用类，设置了应用的标题和主题。

  3. 主页：

    • MyHomePage是主页，包含了一个StatefulWidget，用于管理搜索框的打开和选中项的显示。

  4. 状态管理：

    • items是一个包含100个字符串的列表，作为搜索框的数据源。
    • selectedItem用于存储用户选中的项。

  5. UI构建：

    • 在build方法中，使用Scaffold、AppBar和Column来构建UI。
    • 使用Text显示当前选中的项（如果没有选中项，则显示提示信息）。
    • 使用ElevatedButton打开模态搜索框，当用户点击按钮时，调用showModalSearchBox函数。

  6. 模态搜索框：

    • showModalSearchBox函数接受多个参数，包括上下文、数据项列表、搜索框标签、当前选中的项以及选中项变化时的回调函数。

这个示例展示了如何使用modal_searchbox插件来创建一个简单的模态搜索框，并处理用户选择的结果。你可以根据需要进一步自定义搜索框的样式和行为。

回到顶部