在Flutter中创建带有堆叠列表项的ListView

Question

我在运球偶然发现了这个设计

并且在尝试在颤动中实现它时，我能够使用剪辑路径创建曲线。这就是我的

我试图摆脱形状之间的空间，以便它们可以崩溃。

这是我的CurvedRectangleClipper：`import'包：flutter / material.dart';

class CurvedRectangleClipper extends CustomClipper<Path> {
final double offset = 80;
@override
Path getClip(Size size) {
    // TODO: implement getClip
    Path path = Path();
    path.lineTo(0, size.height - offset);
    var firstEndpoint = Offset(offset, size.height);
    path.arcToPoint(firstEndpoint, radius: Radius.circular(-offset),clockwise: false);

    path.lineTo(size.width, size.height);
    path.lineTo(size.width, offset);
    path.lineTo(offset, offset);

    var secondEndPoint = Offset(0,0);

    path.arcToPoint(secondEndPoint, radius: Radius.circular(-offset),clockwise: true);
    path.lineTo(0, 0);
    path.close();
    return path;
}

@override
bool shouldReclip(CustomClipper oldClipper) {
    // TODO: implement shouldReclip
    return true;
}
}

and this is my main.dart file: import'package：devotion / CurvedRectangleClipper.dart'; import'package：flutter / material.dart';

void main() {
runApp(HomeScreen());
}

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
    home: MainScreen(),
    title: 'Devotion',
    theme: appTheme,
    );
}
}

var appTheme =
    ThemeData(fontFamily: 'Oxygen', primaryColor: Colors.purpleAccent);

class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: Text('Devotion'),
    ),
    body: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
        CurvedListItem(
            title: 'Yoga and Meditation for Beginners',
            time: 'TODAY 5:30 PM'),
        CurvedListItem(
            title: 'Practice French, English And Chinese',
            time: 'TUESDAY 5:30 PM',
        ),
        CurvedListItem(
            title: 'Adobe XD Live Event in Europe',
            time: 'FRIDAY 6:00 PM',
        ),
        ],
    ),
    );
}
}

class CurvedListItem extends StatelessWidget {
final String title;
final String time;
final String people;
final IconData icon;

CurvedListItem({this.title, this.time, this.icon, this.people});

@override
Widget build(BuildContext context) {
    return ClipPath(
    clipper: CurvedRectangleClipper(),
    child: Container(
        color: Colors.pink,
        padding: EdgeInsets.only(
        left: 32,
        top: 100,
        bottom: 50,
        ),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
            Text(
                time,
                style: TextStyle(color: Colors.white, fontSize: 12),
            ),
            SizedBox(
                height: 2,
            ),
            Text(
                title,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 22,
                    fontWeight: FontWeight.bold),
            ),
            Row(),
            ]),
    ),
    );
}
}

`我想如果物品相互放置，则不需要顶部曲线，但我把它留在那里以了解实际的形状。也欢迎更正和评论。提前致谢。

Answer 1

AFAIK，你无法摆脱剪裁小部件之间的空间。您可以采用一种简单而不同的方法来解决这个问题。

我将如何做到这一点：

void main() {
  runApp(HomeScreen());
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainScreen(),
      title: 'Devotion',
      theme: appTheme,
    );
  }
}

ThemeData appTheme = ThemeData(
  fontFamily: 'Oxygen',
  primaryColor: Colors.purpleAccent,
);

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Devotion'),
      ),
      body: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          CurvedListItem(
            title: 'Yoga and Meditation for Beginners',
            time: 'TODAY 5:30 PM',
            color: Colors.red,
            nextColor: Colors.green,
          ),
          CurvedListItem(
            title: 'Practice French, English And Chinese',
            time: 'TUESDAY 5:30 PM',
            color: Colors.green,
            nextColor: Colors.yellow,
          ),
          CurvedListItem(
            title: 'Adobe XD Live Event in Europe',
            time: 'FRIDAY 6:00 PM',
            color: Colors.yellow,
          ),
        ],
      ),
    );
  }
}

class CurvedListItem extends StatelessWidget {
  const CurvedListItem({
    this.title,
    this.time,
    this.icon,
    this.people,
    this.color,
    this.nextColor,
  });

  final String title;
  final String time;
  final String people;
  final IconData icon;
  final Color color;
  final Color nextColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: nextColor,
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(80.0),
          ),
        ),
        padding: const EdgeInsets.only(
          left: 32,
          top: 80.0,
          bottom: 50,
        ),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                time,
                style: TextStyle(color: Colors.white, fontSize: 12),
              ),
              const SizedBox(
                height: 2,
              ),
              Text(
                title,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 22,
                    fontWeight: FontWeight.bold),
              ),
              Row(),
            ]),
      ),
    );
  }
}

注意：我并不认为它是最佳的，但仍然容易和整洁。

希望有所帮助！