Flutter - 如何在一行内实现可滚动的 ListView

Question

在行内添加水平 ListView 会引发此异常：

════════ 渲染库捕捉到的异常═══════════════════════════════:flutter═════' /src/rendering/sliver_multi_box_adaptor.dart'：断言失败：第 545 行 pos 12：'child.hasSize'：不正确。 相关的导致错误的小部件是 ListView lib/.../pages/home_page.dart:68

你怎么能在左侧有一个 label，在 label 的右侧有一个水平滚动的小部件？

这是我当前的代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Testing"),
        ),
        body: Row(
          children: [
            Text(
              "All Bookings",
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                  color: Colors.brown[700]),
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.only(top: 24),
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 30,
                  itemBuilder: (BuildContext context, int index) => ListTile(
                    title: Text("List Item ${index + 1}"),
                  ),
                ),
              ),
            ),
          ],
        ),
    );
  }

Answer 1

ListTile是扩展以填充可用水平空间的行。 如果你试图在一个不确定的水平列表中使用它，它会抛出一个错误，因为它不知道它会扩展多少。 因此，您应该使用Container或SizedBox定义其宽度：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Testing"),
    ),
    body: Row(
      children: [
        Text(
          "All Bookings",
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w600,
            color: Colors.brown[700]),
        ),
        Expanded(
          child: Container(
            margin: EdgeInsets.only(top: 24),
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 30,
              itemBuilder: (BuildContext context, int index) => Container(
                width: 100,
                child: ListTile(
                  title: Text("List Item ${index + 1}"),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}