我想在 Flutter 中创建一个 Circular Cards wheel UI。
我尝试了很多方法,包括
ListWheelScrollView
,但结果并不理想。
以下是所需输出的截图
如果您对此有任何想法,请提供帮助。
这是所需的GIF
您可以在 Flutter 中使用 Stack 和 Transform Widgets 制作神奇的物体。这是给你的。
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Home(),
);
}
}
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
double angle = 0;
@override
Widget build(BuildContext context) {
const cardNumbers = 25;
List<Widget> cards = [
for (int index = 0; index < cardNumbers; index++) _card(rotation: index * 360 / cardNumbers, label: index),
].reversed.toList();
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onHorizontalDragEnd: (details) async {
final dx = details.velocity.pixelsPerSecond.dx.toDouble();
if (dx.abs() > 50) {
setState(() {
angle = angle + dx / 50;
});
}
},
child: Container(
color: Colors.amber,
width: 300,
height: 50,
child: const Center(child: Text('Drag to scroll')),
),
),
const SizedBox(height: 20),
SizedBox(
width: 600,
height: 600,
child: AnimatedRotation(
duration: const Duration(seconds: 5),
turns: angle / 360,
child: Center(
child: Stack(
children: cards,
),
),
),
),
],
),
),
);
}
Transform _card({required double rotation, required int label}) {
const w = 100.0;
const h = 200.0;
const r = 0.9 * h;
final angle = rotation * 3.1415 / 180;
return Transform.translate(
offset: Offset(r * sin(angle), -r * cos(angle)),
child: Transform.rotate(
angle: angle,
child: Container(
width: w,
height: h,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.black, width: 5),
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: const EdgeInsets.all(15),
child: Align(
alignment: Alignment.topRight,
child: Text(
label.toString(),
style: const TextStyle(fontSize: 28),
),
),
),
),
),
);
}
}
要在 Flutter 中创建类似于塔罗牌的圆形卡片轮 UI,您可以使用 Transform 小部件和 Matrix4.rotationZ 来旋转轮子中的每张卡片。这是帮助您入门的分步指南:
设置一个新的 Flutter 项目并在 pubspec.yaml 文件中导入必要的依赖项。你需要 flutter_svg 包来处理 SVG 图像。 yaml
dependencies:
flutter:
sdk: flutter
flutter_svg: ^0.22.0
创建一个新的 Flutter 小部件来表示卡片。此小部件将显示 SVG 图像或您喜欢的卡片内容的任何其他小部件。这是一个例子: 飞镖
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CardWidget extends StatelessWidget {
final String imagePath;
const CardWidget({required this.imagePath});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 150,
child: SvgPicture.asset(imagePath),
);
}
}
为圆形卡片轮创建一个新的 Flutter 小部件。这个小部件将保存一张卡片列表,并根据卡片在列表中的位置使用 Transform 旋转每张卡片。这是一个例子: 飞镖
import 'package:flutter/material.dart';
class CircularCardsWheel extends StatelessWidget {
final List<String> cardImages;
const CircularCardsWheel({required this.cardImages});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: List.generate(cardImages.length, (index) {
final angle = 2 * pi * index / cardImages.length;
return Positioned(
left: 150 * cos(angle),
top: 150 * sin(angle),
child: Transform.rotate(
angle: -angle,
child: CardWidget(imagePath: cardImages[index]),
),
);
}),