Flutter - Card 中的 ListView
Flutter - ListView inside Card
我想在 Card 中创建一个 ListView。我想在应用 运行ning 时从 ListView 中删除 add/remoove 项。
我试过这个:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
AppLocalizations.of(context)!.devices,
style: Theme.of(context).textTheme.headline1,
),
leading: Image.asset(
"assets/logos/logo_standalone.png"
),
),
body: Card(
margin: const EdgeInsets.all(10),
color: Theme.of(context).colorScheme.onBackground,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return const ListTile(title: Text("Test"));
},
itemCount: 5,
shrinkWrap: true,
),
),
),
);
}
当我运行发现有很多错误。有没有可能做到这一点?
使用 ListView
时,您需要 child 关于滚动方向的定义大小。如果您使用 Axis.horizontal
,则 child 的宽度应为 属性。如果您使用 Axis.vertical
,则 child 的高度应为 属性。
此外,Expanded 用于 Column
、Row
或 Flex
。您可以使用 SizedBox.expand
来扩展容器。
在此处阅读相关内容 https://docs.flutter.dev/development/ui/widgets/layout
所以代替:
child: Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return const ListTile(title: Text("Test"));
},
itemCount: 5,
shrinkWrap: true,
),
),
你应该这样做:
child: SizedBox.expand(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) {
return SizedBox(
width: MediaQuery.of(context).size.width * .5,
child: const ListTile(
title: Text("Test"),
),
);
},
),
),
我想在 Card 中创建一个 ListView。我想在应用 运行ning 时从 ListView 中删除 add/remoove 项。 我试过这个:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
AppLocalizations.of(context)!.devices,
style: Theme.of(context).textTheme.headline1,
),
leading: Image.asset(
"assets/logos/logo_standalone.png"
),
),
body: Card(
margin: const EdgeInsets.all(10),
color: Theme.of(context).colorScheme.onBackground,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return const ListTile(title: Text("Test"));
},
itemCount: 5,
shrinkWrap: true,
),
),
),
);
}
当我运行发现有很多错误。有没有可能做到这一点?
使用 ListView
时,您需要 child 关于滚动方向的定义大小。如果您使用 Axis.horizontal
,则 child 的宽度应为 属性。如果您使用 Axis.vertical
,则 child 的高度应为 属性。
此外,Expanded 用于 Column
、Row
或 Flex
。您可以使用 SizedBox.expand
来扩展容器。
在此处阅读相关内容 https://docs.flutter.dev/development/ui/widgets/layout
所以代替:
child: Expanded(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return const ListTile(title: Text("Test"));
},
itemCount: 5,
shrinkWrap: true,
),
),
你应该这样做:
child: SizedBox.expand(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (context, index) {
return SizedBox(
width: MediaQuery.of(context).size.width * .5,
child: const ListTile(
title: Text("Test"),
),
);
},
),
),