Flutter 旋轉(zhuǎn)輪
在在本文中，我們將探討 “Flutter 中的旋轉(zhuǎn)輪”。我們還將在flutter應(yīng)用程序中使用「flutter_spinwheel」包來實現(xiàn)帶有自定義選項的「Spinwheel」演示程序。
pub 地址：https://pub.dev/packages/flutter_spinwheel
效果演示：
該演示視頻展示了如何在Flutter中使用自旋輪。它顯示了如何在flutter應(yīng)用程序中使用「flutter_spinwheel」軟件包運行「旋轉(zhuǎn)輪」，并顯示了當(dāng)您點擊該項目時，旋轉(zhuǎn)器將移動。同樣，您將沿順時針/逆時針的任何方向移動微調(diào)器。它將在您的設(shè)備上顯示所選的文本。
自旋輪有一些功能：
自動播放（啟用/禁用） 長按以暫停（啟用/禁用） 尺寸調(diào)整 文字/圖片支持 圖像調(diào)整支持 順時針和逆時針平移進行導(dǎo)航 觸摸即可在先前平移的方向上導(dǎo)航 繪畫定制以改變外觀 回調(diào)功能通知選定的項目
SDK中屬性說明如下：
**touchToRotate：**此屬性用于確定觸摸微調(diào)器是否將使其沿以前的平移方向旋轉(zhuǎn)（默認為順時針方向）。 「itemCount：「此屬性用于分配給」Spinwheel」類的菜單項數(shù)。應(yīng)該在構(gòu)造函數(shù)中處理它。 **shouldDrawBorder：**此屬性用于確定是否應(yīng)繪制邊框。 **hideOthers：**此屬性用于確定是否應(yīng)繪制快門以隱藏除選定以外的所有選項。 **shutterPaint：**如果適用，此屬性用于繪制用于繪制快門的設(shè)置。此外，它是可定制的。 **onChanged：**此 屬性用于在每次更改選擇時從微調(diào)器菜單返回所選值的回調(diào)。 「select」：此 屬性用于選擇（突出顯示）圓的扇區(qū)。范圍是0（項目大小）。想象它就像一個數(shù)組。選擇編號從0開始。
使用
添加依賴
flutter_spinwheel: ^0.1.0引入
import 'package:flutter_spinwheel/flutter_spinwheel.dart';運行命令：「flutter packages get」
啟用「AndriodX」
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
在libs目錄下創(chuàng)建 「spinwheel_demo.dart」 文件，我們將創(chuàng)建一個由名稱給定的字符串的兩個列表，稱為問題和答案。我們將創(chuàng)建由名稱選擇給出的動態(tài)列表的列表。同樣，我們將創(chuàng)建一個由名稱select給定的整數(shù)。
List<String> questions;
List<List<dynamic>> choices;
List<String> answers;
int select;
**initState（）**方法 中初始化所有變量，例如問題，選擇，選擇和答案。
@override
void initState() {
super.initState();
questions = [
'Which programming language you will use?',
];
choices = [
['Kotlin', 'Swift', 'Dart', 'Java', 'Python', 'C#', 'Ruby', 'PHP'],
];
select = 0;
answers = ['', '', ''];
}
添加**ListView.builder（）。**在此構(gòu)建器中，我們將添加itemCount和itemBuilder。在itemBuilder中，我們將導(dǎo)航容器小部件。在小部件內(nèi)，我們將添加一個邊距，即容器的高度。他的子屬性，我們將添加一個列小部件。在此小部件中，我們將添加兩個文本，分別是問題和答案。
ListView.builder(
itemCount: 1,
itemBuilder: (context, index) => Container(
margin: EdgeInsets.all(30.0),
height: MediaQuery.of(context).size.height / 1.7,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(questions[index],style: TextStyle(fontSize: 18,
color: Colors.black, fontWeight: FontWeight.bold),),
Text(answers[index],style: TextStyle(fontSize: 30,
color: Colors.cyanAccent,fontWeight: FontWeight.bold),),
Center(
child: Spinwheel(
size: MediaQuery.of(context).size.height*0.6,
items: choices[index][0] is String
? choices[index].cast<String>()
: null,
select: select,
autoPlay: false,
hideOthers: false,
shouldDrawBorder: true,
onChanged: (val) {
if (this.mounted)
setState(() {
answers[index] = val;
});
},
),
)
],
),
),
)),
現(xiàn)在，我們將添加一個「Spinwheel（）「包。在此程序包中，我們將添加」size」表示將在其上繪制圓形微調(diào)器的正方形，「item」表示將在微調(diào)器上顯示該大小。每個人將獲得一個相等分開的圈子部分；select表示圓的選擇**（突出顯示）「扇區(qū)的位置，「autoPlay」表示設(shè)置為true進行自動播放，「hideOthers」表示確定是否應(yīng)繪制快門以隱藏除選定」項「以外的所有選項，應(yīng)當(dāng)繪制邊框」指令**確定是否應(yīng)繪制邊框，「onChanged」表示每次更改選擇時從微調(diào)器菜單返回所選值的回調(diào)。當(dāng)我們運行應(yīng)用程序時，我們應(yīng)該獲得屏幕的輸出，如屏幕下方的截圖所示。
完整實現(xiàn)：
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_spinwheel/flutter_spinwheel.dart';
class SpinWheelDemo extends StatefulWidget {
@override
_SpinWheelDemoState createState() => _SpinWheelDemoState();
}
class _SpinWheelDemoState extends State<SpinWheelDemo> {
List<String> questions;
List<List<dynamic>> choices;
List<String> answers;
int select;
@override
void initState() {
super.initState();
questions = [
'Which programming language you will use?',
];
choices = [
['Kotlin', 'Swift', 'Dart', 'Java', 'Python', 'C#', 'Ruby', 'PHP'],
];
select = 0;
answers = ['', '', ''];
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey[200],
appBar: AppBar(
title: Text('Flutter SpinWheel Demo '),
automaticallyImplyLeading: false,
),
body: Scrollbar(
child: ListView.builder(
itemCount: 1,
itemBuilder: (context, index) => Container(
margin: EdgeInsets.all(30.0),
height: MediaQuery.of(context).size.height / 1.7,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(questions[index],style: TextStyle(fontSize: 18,
color: Colors.black, fontWeight: FontWeight.bold),),
Text(answers[index],style: TextStyle(fontSize: 30,
color: Colors.cyanAccent,fontWeight: FontWeight.bold),),
Center(
child: Spinwheel(
size: MediaQuery.of(context).size.height*0.6,
items: choices[index][0] is String
? choices[index].cast<String>()
: null,
select: select,
autoPlay: false,
hideOthers: false,
shouldDrawBorder: true,
onChanged: (val) {
if (this.mounted)
setState(() {
answers[index] = val;
});
},
),
)
],
),
),
)),
),
);
}
}