如何在Flutter中创建圆形ListView

如何解决如何在Flutter中创建圆形ListView

通告列表视图演示。可能对您有帮助。

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？我想要一些可以让小部件列表围绕原点旋转的东西。

类似于以下内容： 与此类似。

任何帮助，将不胜感激。