如何在Flutter中创建圆形ListView

• Z时代
• 2024-01-10
• 分类：问答

如何在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 的全部内容， 来源链接： utcz.com/qa/418294.html