dart - 在 Flutter 中创建具有堆叠列表项的 ListView
问题描述
并尝试在颤振中实现它,我能够使用剪辑路径创建曲线。这就是我所拥有的
我试图摆脱形状之间的空间,以便它们可以折叠。
这是我的 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;
}
}
and this is my main.dart file:
导入“包:奉献/CurvedRectangleClipper.dart”;导入“包:颤振/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(),
]),
),
);
}
}
` 我猜如果将物品放在一起,则不需要顶部曲线,但我将其留在那里以了解实际形状。也欢迎指正和评论。提前致谢。
解决方案
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(),
]),
),
);
}
}
注意:我并不认为它是最佳的,但仍然简单而整洁。
希望有帮助!
推荐阅读
- angular - ngModel 用白屏杀死输出
- android - ionic - 读取 android 资产文件
- python - 验证失败:z3 python 上的 !m_var2expr.empty()
- python - 使用 Python 从星系照片中删除背景
- javascript - 使特定的表格可滚动?
- c - 由于 unsigned int 变量类型在 c 中有无限循环时会发生什么
- python - 在Python中将垂直系列重塑为水平系列
- javascript - 引用静态方法内部的类而不使用其名称
- javascript - 将变量从 javascript 传递给 python,无需重新加载页面
- javascript - Non-greedy capturing parenthesis