如何在Flutter中创建圆形ListView [英] How to create circular ListView in Flutter
本文介绍了如何在Flutter中创建圆形ListView的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在Flutter中创建圆形ListView？
我想要一些可以让小部件列表围绕原点旋转的东西。
类似于以下内容：
任何帮助将不胜感激。
解决方案
循环列表视图演示。
Main.dart
导入'package：master / numbers_list.dart';
import‘package：master / radial_list.dart’;
导入的 package：meta / meta.dart；
导入的 package：flutter / material.dart；
void main（）{
runApp（MyHomePage（））;
}
类MyHomePage扩展了StatelessWidget {
@override
Widget build（BuildContext context）{
return MaterialApp（
theme：new ThemeData （
accentColor：Colors.blue，
），
home：HomePage（），
）;
}
}
类HomePage扩展StatefulWidget {
RadialListViewModel radiusList;
HomePage（{
@required this.radialList
}）;
@override
HomePageState createState（）{
返回new HomePageState（）;
}
}
类HomePageState扩展State< HomePage> {
@override
Widget build（BuildContext context）{
return Scaffold（
appBar：new AppBar（
title：Text（ My Home Page），
），
正文：Stack（
个孩子：< Widget> [
RadialList（
radialList：radialNumbers），
半径：150.00，
），
]，
）
）;
}
}
numbers_list.dart
import'package：master / radial_list.dart';
最终RadialListViewModel径向数=新RadialListViewModel（
项：[
新RadialListItemViewModel（
数：1，
isSelected：true，
） ，
新RadialListItemViewModel（
编号：2，
isSelected：否，
），
新RadialListItemViewModel（
编号：3，
isSelected ：false，
），新RadialListItemViewModel（
数：4，
isSelected：false，
），
新RadialListItemViewModel（
数：5，
isSelected：false，
），
新RadialListItemViewModel（
数字：6，
isSelected：false，
），
新RadialListItemViewModel（
数字：7，
isSelected：否，
），
新RadialListItemViewModel（
数字：8，
isSelected：否，
），
new RadialListItemViewModel（
number：9，
isSelected：false，
），
新RadialListItemViewModel（
编号：10，
isSelected：false，
），
新RadialListItemViewModel（
编号：11，
isSelected： false，
），new RadialListItemViewModel（
number：12，
isSelected：false，
），
]
）;
radial_list.dart
import'package：flutter / material.dart';
导入 dart：math；
import‘package：master / radial_position.dart’;
类RadialList扩展了StatefulWidget {
final RadialListViewModel radiusList;
最终双倍半径；
RadialList（{
this.radialList，
this.radius，
}）;
List< Widget> _radialListItems（）{
final double firstItemAngle = pi;
final double lastItemAngle = pi;
final double angleDiff =（firstItemAngle + lastItemAngle）/（radialList.items.length）;
double currentAngle = firstItemAngle;
return radiusList.items.map（（RadialListItemViewModel viewModel）{
final listItem = _radialListItem（viewModel，currentAngle）;
currentAngle + = angleDiff;
return listItem;
}）。toList（）;
}
小部件_radialListItem（RadialListItemViewModel viewModel，double angle）{
return Transform（
transform：new Matrix4.translationValues（
180.0，
250.0，
0.0
），
子级：RadialPosition（
半径：半径，
角度：角度，
子级：new RadialListItem（
listItem：viewModel，
），
），
）;
}
@override
RadialListState createState（）{
return new RadialListState（）;
}
}
类RadialListState扩展State< RadialList> {
@override
Widget build（BuildContext context）{
return new Stack（
children：widget._radialListItems（），
）;
}
}
类RadialListItem扩展了StatefulWidget {
final RadialListItemViewModel listItem;
RadialListItem（{
this.listItem
}）;
@override
RadialListItemState createState（）{
返回new RadialListItemState（）;
}
}
类RadialListItemState扩展State< RadialListItem> {
@override
Widget build（BuildContext context）{
return Transform（
transform：new Matrix4.translationValues（-30.0，-30.0，0.0），
子级：容器（
宽度：60.0，
高度：60.0，
装饰：新BoxDecoration（
形状：BoxShape.circle，
颜色：Colors.deepPurpleAccent，
边框：新的Border.all（
颜色：Colors.red，
宽度：2.0
）
），
子级：填充（
padding ：const EdgeInsets.all（0.0），
子元素：OutlineButton（
形状：new RoundedRectangleBorder（borderRadius：new BorderRadius.circular（60.0）），
颜色：Colors.transparent，
onPressed：（）{
setState（（）{
widget.listItem.isSelected = true;
//widget.listItem.number = widget.listItem.number + 1;
}）;
}，
子级：new Text（
widget.listItem.number.toString（），
样式：new TextStyle（
颜色：widget.listItem.isSelected吗？ Colors.red：Colors.yellow，
fontSize：20.0
），
），
），
），
），
） ;
}
}
类RadialListViewModel {
final List< RadialListItemViewModel>物品;
RadialListViewModel（{
this.items = const []，
}）;
}
class RadialListItemViewModel {
int number;
bool isSelected;
RadialListItemViewModel（{
this.isSelected = false，
this.number，
}）;
}
radial_position.dart
导入'package：flutter / material.dart';
导入 dart：math；
类RadialPosition扩展了StatefulWidget {
最终的双半径；
最终双角；
个最终Widget子对象；
RadialPosition（{
this.angle，
this.child，
this.radius，
}）;
@override
RadialPositionState createState（）{
return new RadialPositionState（）;
}
}
类RadialPositionState扩展State< RadialPosition> {
@override
Widget build（BuildContext context）{
final x = cos（widget.angle）* widget.radius;
final y = sin（widget.angle）* widget.radius;
return Transform（
transform：new Matrix4.translationValues（x，y，0.0），
child：widget.child，
）;
}
}
How would I create a circular ListView in Flutter? I want something that allows me to have a list of widgets rotate around an origin.
Something similar to this:
Any help would be appreciated.
解决方案
Circular List View Demo. Which Is helpful for You May be.
Main.dart
import 'package:master/numbers_list.dart';
import 'package:master/radial_list.dart';
import 'package:meta/meta.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyHomePage());
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(
accentColor: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
RadialListViewModel radialList;
HomePage({
@required this.radialList
});
@override
HomePageState createState() {
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("My Home Page"),
),
body: Stack(
children: <Widget>[
RadialList(
radialList: radialNumbers,
radius: 150.00,
),
],
)
);
}
}
numbers_list.dart
import 'package:master/radial_list.dart';
final RadialListViewModel radialNumbers = new RadialListViewModel(
items: [
new RadialListItemViewModel(
number: 1,
isSelected: true,
),
new RadialListItemViewModel(
number: 2,
isSelected: false,
),
new RadialListItemViewModel(
number: 3,
isSelected: false,
),new RadialListItemViewModel(
number: 4,
isSelected: false,
),
new RadialListItemViewModel(
number: 5,
isSelected: false,
),
new RadialListItemViewModel(
number: 6,
isSelected: false,
),
new RadialListItemViewModel(
number: 7,
isSelected: false,
),
new RadialListItemViewModel(
number: 8,
isSelected: false,
),
new RadialListItemViewModel(
number: 9,
isSelected: false,
),
new RadialListItemViewModel(
number: 10,
isSelected: false,
),
new RadialListItemViewModel(
number: 11,
isSelected: false,
),new RadialListItemViewModel(
number: 12,
isSelected: false,
),
]
);
radial_list.dart
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:master/radial_position.dart';
class RadialList extends StatefulWidget {
final RadialListViewModel radialList;
final double radius;
RadialList({
this.radialList,
this.radius,
});
List<Widget> _radialListItems(){
final double firstItemAngle = pi;
final double lastItemAngle = pi;
final double angleDiff = (firstItemAngle + lastItemAngle) / (radialList.items.length);
double currentAngle = firstItemAngle;
return radialList.items.map((RadialListItemViewModel viewModel){
final listItem = _radialListItem(viewModel,currentAngle);
currentAngle += angleDiff;
return listItem;
}).toList();
}
Widget _radialListItem(RadialListItemViewModel viewModel, double angle){
return Transform(
transform: new Matrix4.translationValues(
180.0,
250.0,
0.0
),
child: RadialPosition(
radius: radius,
angle: angle,
child: new RadialListItem(
listItem: viewModel,
),
),
);
}
@override
RadialListState createState() {
return new RadialListState();
}
}
class RadialListState extends State<RadialList> {
@override
Widget build(BuildContext context) {
return new Stack(
children: widget._radialListItems(),
);
}
}
class RadialListItem extends StatefulWidget {
final RadialListItemViewModel listItem;
RadialListItem({
this.listItem
});
@override
RadialListItemState createState() {
return new RadialListItemState();
}
}
class RadialListItemState extends State<RadialListItem> {
@override
Widget build(BuildContext context) {
return Transform(
transform: new Matrix4.translationValues(-30.0, -30.0, 0.0),
child: Container(
width: 60.0,
height: 60.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepPurpleAccent,
border: new Border.all(
color: Colors.red,
width: 2.0
)
),
child: Padding(
padding: const EdgeInsets.all(0.0),
child: OutlineButton(
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)),
color: Colors.transparent,
onPressed: () {
setState(() {
widget.listItem.isSelected = true;
//widget.listItem.number = widget.listItem.number + 1;
});
},
child: new Text(
widget.listItem.number.toString(),
style: new TextStyle(
color: widget.listItem.isSelected ? Colors.red : Colors.yellow,
fontSize: 20.0
),
),
),
),
),
);
}
}
class RadialListViewModel{
final List<RadialListItemViewModel> items;
RadialListViewModel({
this.items = const [],
});
}
class RadialListItemViewModel{
int number;
bool isSelected;
RadialListItemViewModel({
this.isSelected=false,
this.number,
});
}
radial_position.dart
import 'package:flutter/material.dart';
import 'dart:math';
class RadialPosition extends StatefulWidget {
final double radius;
final double angle;
final Widget child;
RadialPosition({
this.angle,
this.child,
this.radius,
});
@override
RadialPositionState createState() {
return new RadialPositionState();
}
}
class RadialPositionState extends State<RadialPosition> {
@override
Widget build(BuildContext context) {
final x = cos(widget.angle) * widget.radius;
final y = sin(widget.angle) * widget.radius;
return Transform(
transform: new Matrix4.translationValues(x, y, 0.0),
child: widget.child,
);
}
}
这篇关于如何在Flutter中创建圆形ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
