view - 如何制作像 WheelView 这样的循环项目列表？

Question

我目前正在开发一个应用程序，我需要在其中以循环方式显示选项列表。就像一把“左轮手枪”？/车轮？我什至不知道如何用语言来定义它。

作为引用，我想要类似 Glovo 的东西:

我自己尝试了一些东西，但很乱，而且不适合每个设备的纵横比。这是代码

/* HomeBubbleItem is just a Container with BoxShape.circle and Text */

Widget _buildExperiencesSection() {
    return Center(
      child: Stack(
        children: <Widget>[
          Positioned(
            top: MediaQuery.of(context).size.height / 3,
            left: MediaQuery.of(context).size.width / 3,
            child: HomeBubbleItem(experience: _experiences[0], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            top: MediaQuery.of(context).size.height / 4,
            left: MediaQuery.of(context).size.width / 32,
            child: HomeBubbleItem(experience: _experiences[1], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            top: MediaQuery.of(context).size.height / 4,
            right: MediaQuery.of(context).size.width / 32,
            child: HomeBubbleItem(experience: _experiences[2], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            top: MediaQuery.of(context).size.height / 7,
            left: MediaQuery.of(context).size.width / 3,
            child: HomeBubbleItem(experience: _experiences[3], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            bottom: MediaQuery.of(context).size.height / 14,
            left: MediaQuery.of(context).size.width / 3,
            child: HomeBubbleItem(experience: _experiences[4], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            bottom: MediaQuery.of(context).size.height / 6.5,
            left: MediaQuery.of(context).size.width / 32,
            child: HomeBubbleItem(experience: _experiences[5], color: Colors.blue, icon: Icons.check,),
          ),
          Positioned(
            bottom: MediaQuery.of(context).size.height / 6.5,
            right: 11.0,
            child: HomeBubbleItem(experience: _experiences[6], color: Colors.blue, icon: Icons.check,),
          ),
        ],
      ),
    );
  }

这是我的悲哀结果:

我想知道是否有更好的优化方法来实现这一点。

谢谢!

Answer 1

希望下面的例子能解决你的问题。

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<int> data = [1,2,3,4,5,6,7,8];

  double radius =  125.0;

  List<Widget> list(){
    final double firstItemAngle = pi;
    final double lastItemAngle = pi;
    final double angleDiff = (firstItemAngle + lastItemAngle) / 6;
    double currentAngle = firstItemAngle;

    return data.map((int index){
      currentAngle += angleDiff;
      return _radialListItem(currentAngle,index);
    }).toList();
  }

  Widget _radialListItem(double angle, int index){

    final x = cos(angle)  * radius;
    final y = sin(angle) * radius;


    return Center(
      child: Transform(
        transform: index == 1 ? Matrix4.translationValues(0.0, 0.0 , 0.0) : Matrix4.translationValues(x, y , 0.0),
        child: InkWell(
          onTap: (){
            print(index.toString());
          },
          child: CircleAvatar(
            radius: 50.0,
            backgroundImage: AssetImage("images/c1.jpeg"),
          ),
        )
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("hello World"),
      ),
      body: new Stack(
        children: list()
      ),
    );
  }
}