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 用于 ColumnRowFlex。您可以使用 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"),
        ),
      );
    },
  ),
),