Flutter旋转选择器插件wheel_spin的使用

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

Flutter旋转选择器插件wheel_spin的使用

flutter_spinning_wheel

Build Status License: MIT Pub

这是一个在Flutter中使用的可定制的旋转轮盘小部件。

开始使用

安装

在你的 pubspec.yaml 文件中添加：

flutter_spinning_wheel: ^latest_version

然后在项目根目录下运行：

flutter packages get

基本用法

创建一个新的Flutter项目：

flutter create myapp

编辑 lib/main.dart 文件：

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

  // 这个小部件是应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  WheelSpinController wheelSpinController = WheelSpinController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法
    // Flutter框架已优化了构建方法的重运行速度，因此您可以重建任何需要更新的小部件，而不是逐个更改实例
    return Scaffold(
      appBar: AppBar(
        // 从MyHomePage对象中获取值，并用于设置appbar标题
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将其放置在其父元素的中间
        child: Column(
          children: [
            WheelSpin(
              controller: wheelSpinController,
              pathImage: 'assets/wheel.png', // 轮盘图像路径
              withWheel: 300, // 轮盘宽度
              pieces: 6, // 分割块数
              // speed: 500, // 默认速度为500
              isShowTextTest: true, // 是否显示测试文本
              // offset: 1 / (10 * 6), // 随机偏移，默认为零
            ),
            TextButton(
              onPressed: () {
                wheelSpinController.startWheel(); // 开始旋转
              },
              child: Text("Start")),
            TextButton(
              onPressed: () {
                wheelSpinController.stopWheel(2); // 停止旋转
              },
              child: Text("Stop"))
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用wheel_spin插件来实现旋转选择器的示例代码。wheel_spin是一个流行的Flutter插件，用于创建旋转选择器（也称为转盘选择器）。

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

dependencies:
  flutter:
    sdk: flutter
  wheel_spin: ^latest_version  # 请将latest_version替换为实际最新版本号

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

接下来，在你的Flutter项目中创建一个新的Dart文件（例如main.dart），并编写以下代码来创建一个旋转选择器：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wheel Spin Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            WheelSpin(
              items: items,
              selectedIndex: selectedIndex,
              onItemSelected: (index) {
                setState(() {
                  selectedIndex = index;
                });
              },
              itemBuilder: (context, index, item) {
                return Text(
                  item,
                  style: TextStyle(fontSize: 20, color: Colors.black),
                );
              },
              itemWidth: (index) => 100.0,
              itemHeight: (index) => 100.0,
              itemAngle: (index) => 72.0, // 360 / 5 = 72 degrees per item
              physics: BouncingScrollPhysics(),
            ),
            SizedBox(height: 20),
            Text(
              'Selected Item: ${items[selectedIndex]}',
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖项：确保你在pubspec.yaml文件中添加了wheel_spin依赖项。

  2. 导入包：在main.dart文件中导入wheel_spin包。

  3. UI结构：

    • MyApp：根应用组件。
    • MyHomePage：主页面组件，包含状态（selectedIndex）。
    • WheelSpin：旋转选择器组件。
      • items：旋转选择器中的项目列表。
      • selectedIndex：当前选中的项目索引。
      • onItemSelected：当选中项目变化时的回调函数。
      • itemBuilder：自定义每个项目的构建方式。
      • itemWidth、itemHeight、itemAngle：分别设置每个项目的宽度、高度和角度。
      • physics：设置物理效果，这里使用了BouncingScrollPhysics。

  4. 显示选中项：在旋转选择器下方显示当前选中的项目。

运行这个示例代码，你应该会看到一个带有旋转选择器的Flutter应用，当旋转选择器旋转时，下方显示的选中项会随之变化。

希望这个示例能帮助你理解如何在Flutter中使用wheel_spin插件！

回到顶部