Flutter底部选择列表插件select_bottom_list的使用

Flutter底部选择列表插件select_bottom_list的使用

Demo

关闭 显示

特性

  • 提供一个简单的可选输入列表组件。
  • 动态的模态高度。
  • 使用底部弹出菜单的简单选择输入列表。

开始使用

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

dependencies:
  select_bottom_list: any

然后导入该包：

import 'package:select_bottom_list/select_bottom_list.dart';

使用方法

基本用法

SelectBottomList(
  data: [], // 数据列表
  selectedId: "", // 当前选中的项ID
  selectedTitle: "", // 当前选中的项标题
  isDisable: false, // 是否禁用选择
  onChange: (id, title) { // 选择变化时的回调函数
    // 在这里处理选择变化后的逻辑
  },
),

完整示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Select Bottom List Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Select Bottom List'),
    );
  }
}

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> {
  String selectedId = ''; // 当前选中的项ID
  String selectedTitle = ''; // 当前选中的项标题

  // 水果数据列表
  final List<SelectItem> fruitData = const [
    SelectItem(id: '1', title: '香蕉'),
    SelectItem(id: '2', title: '橘子'),
    SelectItem(id: '3', title: '苹果'),
    SelectItem(id: '4', title: '猕猴桃'),
    SelectItem(id: '5', title: '梨'),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "选择水果",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 4),
            SelectBottomList(
              data: fruitData, // 数据列表
              selectedId: selectedId, // 当前选中的项ID
              selectedTitle: selectedTitle.isNotEmpty ? selectedTitle : '请选择水果', // 当前选中的项标题
              isDisable: false, // 是否禁用选择
              onChange: (id, title) {
                setState(() {
                  selectedId = id; // 更新选中的ID
                  selectedTitle = title; // 更新选中的标题
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter底部选择列表插件select_bottom_list的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部选择列表插件select_bottom_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


select_bottom_list 是一个 Flutter 插件，用于在底部显示一个选择列表，供用户选择。它通常用于需要从多个选项中选择一个的场景，比如选择性别、地区、日期等。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 select_bottom_list 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  select_bottom_list: ^1.0.0  # 请使用最新版本

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

使用插件

以下是一个简单的示例，展示了如何使用 select_bottom_list 插件在底部显示一个选择列表：

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

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

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

class HomeScreen extends StatelessWidget {
  final List<String> items = [
    '选项1',
    '选项2',
    '选项3',
    '选项4',
    '选项5',
  ];

  void _showBottomList(BuildContext context) async {
    final selectedItem = await SelectBottomList.show<String>(
      context,
      title: '请选择一个选项',
      items: items,
    );

    if (selectedItem != null) {
      print('你选择了: $selectedItem');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Bottom List Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showBottomList(context),
          child: Text('显示选择列表'),
        ),
      ),
    );
  }
}
回到顶部