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

【问题标题】：Flutter - How to implement scrollable ListView inside a rowFlutter - 如何在一行内实现可滚动的 ListView
【发布时间】：2021-06-17 23:18:03
【问题描述】：

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

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

如何在左侧有一个标签，而在标签的右侧有水平滚动的小部件？

这是我当前的代码：

  @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}"),
                  ),
                ),
              ),
            ),
          ],
        ),
    );
  }

【问题讨论】：

标签： flutter

【解决方案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}"),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

【讨论】：