在 Flutter 中创建具有堆叠列表项的 ListView [英] Creating A ListView With Stacked List Items in Flutter
问题描述
我在 Dribble 中偶然发现了这个设计
I stumbled upon this design in dribble
在尝试在颤振中实现它时，我能够使用剪辑路径创建曲线.这就是我所拥有的
and in trying to implement it in flutter I was able to create the curves using clip Path. this is what I have
我正在尝试消除形状之间的空间，以便它们可以折叠.
I am trying to get rid of the space in between the shapes so that they can collapse.
这是我的 CurvedRectangleClipper:`导入'package:flutter/material.dart';
this is my CurvedRectangleClipper:` import 'package: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;
}
}
<代码>这是我的 main.dart 文件:导入包:奉献/CurvedRectangleClipper.dart"；导入'package:flutter/material.dart';
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(),
]),
),
);
}
}
`我猜如果物品彼此放置，则不需要顶部曲线，但我将其留在那里以了解实际形状.也欢迎指正和评论.提前致谢.
` I guess the top curve is not needed if the items are placed on each other but I left it there to know the actual shape. Corrections and comments are also welcome. Thanks in advance.
推荐答案
AFAIK，你无法摆脱被剪裁的小部件之间的空间.您可以采用一种简单且不同的方法来解决此问题.
AFAIK, you cannot get rid of the space between the clipped widgets. There is a easy and different approach you can take to solve this.
我会这样做:
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(),
]),
),
);
}
}
注意:我并不认为它是最佳的，但仍然简单而整洁.
Note: I don't claim it to be optimal, but still easy and neat.
希望有所帮助！
这篇关于在 Flutter 中创建具有堆叠列表项的 ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
