Flutter水平选择器插件horizontal_picker的使用

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

Flutter水平选择器插件horizontal_picker的使用

Horizontal Picker 是一个在Flutter中用于实现水平选择器功能的插件。用户可以通过滚动来选择数值。

示例图片

Sample 1 Sample 2 Sample 3

安装

请参考 Pub.dev安装指南 进行插件的安装。

使用示例

以下是一个完整的示例代码,展示如何使用 HorizontalPicker 插件:

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal Picker',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  double? newValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              HorizontalPicker(
                minValue: 0,
                maxValue: 10,
                divisions: 10,
                height: 120,
                onChanged: (value) {},
              ),
              Divider(),
              HorizontalPicker(
                minValue: 0,
                maxValue: 10,
                divisions: 10,
                height: 120,
                suffix: " °C",
                showCursor: false,
                backgroundColor: Colors.lightBlue.shade50,
                activeItemTextColor: Colors.blue.shade800,
                passiveItemsTextColor: Colors.blue.shade300,
                onChanged: (value) {},
              ),
              Divider(),
              HorizontalPicker(
                minValue: -10,
                maxValue: 55,
                divisions: 600,
                height: 120,
                suffix: " cm",
                showCursor: false,
                backgroundColor: Colors.grey.shade900,
                activeItemTextColor: Colors.white,
                passiveItemsTextColor: Colors.amber,
                onChanged: (value) {
                  setState(() {
                    newValue = value;
                  });
                },
              ),
              Text(newValue?.toString() ?? 'No value selected')
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

  • minValue: 最小值。
  • maxValue: 最大值。
  • divisions: 刻度数量。
  • suffix: 数值后缀。
  • showCursor: 是否显示光标。
  • backgroundColor: 背景颜色。
  • activeItemTextColor: 当前选中项的文字颜色。
  • passiveItemsTextColor: 非选中项的文字颜色。
  • onChanged: 值改变时的回调函数。

通过这个插件,你可以轻松地在你的Flutter应用中添加一个美观且实用的水平选择器。希望这个示例对你有所帮助!


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

1 回复

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


当然,以下是如何在Flutter项目中使用horizontal_picker插件的一个基本示例。horizontal_picker是一个Flutter插件,允许你创建一个水平选择器,用户可以在其中选择单个或多个选项。

首先,你需要在你的pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  horizontal_picker: ^最新版本号  # 请替换为实际的最新版本号

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

接下来,你可以在你的Flutter项目中创建一个水平选择器。以下是一个简单的示例,展示了如何配置和使用horizontal_picker

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HorizontalPickerExample(),
    );
  }
}

class HorizontalPickerExample extends StatefulWidget {
  @override
  _HorizontalPickerExampleState createState() => _HorizontalPickerExampleState();
}

class _HorizontalPickerExampleState extends State<HorizontalPickerExample> {
  List<String> options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5',
  ];

  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Horizontal Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Option: ${options[selectedIndex]}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            HorizontalPicker(
              data: options,
              selectedIndex: selectedIndex,
              onSelectedIndexChanged: (index) {
                setState(() {
                  selectedIndex = index;
                });
              },
              itemBuilder: (context, index, data) {
                return Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.symmetric(horizontal: 8.0),
                  decoration: BoxDecoration(
                    color: index == selectedIndex
                        ? Colors.blue.withOpacity(0.3)
                        : Colors.transparent,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Text(
                    data,
                    style: TextStyle(
                      color: index == selectedIndex ? Colors.blue : Colors.black,
                      fontSize: 18,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. options是一个包含选项的字符串列表。
  2. selectedIndex用于存储当前选中的选项索引。
  3. HorizontalPicker小部件用于显示水平选择器,并配置以下属性:
    • data:数据源,即选项列表。
    • selectedIndex:当前选中的索引。
    • onSelectedIndexChanged:当选中索引改变时的回调。
    • itemBuilder:用于构建每个选项的自定义小部件。

运行这个示例,你会看到一个简单的水平选择器,用户可以在其中选择选项,并且当前选中的选项会在界面上显示。

希望这能帮助你开始使用horizontal_picker插件!如果你有任何其他问题,请随时询问。

回到顶部