尝试构建具有水平scrollDirection的ListView - 失败

Question

我一直尝试显示一个简单的 ListView，我将用从后端获得的响应数据来填充它。首先，我想在我的 MainPage 小部件中显示简单的 ListView，但我不断收到以下错误。除了 this解决方案之外，我找不到与该错误相关的任何内容，其中提到了将 ListView.builder 包装在 Expanded 小部件中并添加

shrinkWrap: true

属性。但是，我不断收到以下错误：

════════════════════════════════════════ ═════════ ═══════════════════════════════

════════调度程序库捕获异常 ═════════════════════════════════需要更新布局信息 对于 RenderFlex#c30cf relayoutBoundary=up11 需要布局需要绘制 计算语义。 '包：flutter/src/rendering/object.dart'： 断言失败：第 3620 行第 12 行：'!_needsLayout' ═════════════════════════════════════════ ═════════ ══════════════════════════════

════════手势库捕获异常 ══════════════════════════════════无法点击测试渲染框 从未被布置过。 ═════════════════════════════════════════ ═════════ ══════════════════════════════

════════手势库捕获异常 ══════════════════════════════════无法点击测试渲染框 从未被布置过。 ═════════════════════════════════════════ ═════════ ══════════════════════════════

这是我的 ListView.builder 的代码，下面我将放置 MainPage 小部件的完整代码： 列表视图

Expanded(
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: 15,
    itemBuilder: (BuildContext context, int index) => Card(
      child: Center(child: Text('Dummy Card Text')),
    ),
  ),
),

整个小部件

class MainPage extends ConsumerWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context, ref) {
    // provider
    // final _data = ref.watch(roomDataProvider);

    final roomIDController = TextEditingController();
    // UI screen size
    Size size = MediaQuery.of(context).size;

    double deviceWidth = size.width;
    double deviceHeight = size.height;

    return Scaffold(
      backgroundColor: bluePrimary,
      body: SafeArea(
          child: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 36, vertical: 16),
          child: Column(
              //crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      iconSize: deviceWidth * 0.09,
                      icon: const Icon(Icons.person_outline,
                          color: orangePrimary),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: const Icon(
                        Icons.add,
                        color: orangePrimary,
                      ),
                      iconSize: deviceWidth * 0.09,
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const CreateRoomScreen()),
                        );
                      },
                    )
                  ],
                ),
                SizedBox(height: deviceHeight * 0.04),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("W",
                      style: TextStyle(
                          fontFamily: 'Chalet',
                          fontSize: deviceWidth * 0.12,
                          color: orangePrimary,
                          fontWeight: FontWeight.w300,
                          height: deviceHeight * 0.001)),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("W",
                      style: TextStyle(
                          fontFamily: 'Chalet',
                          fontSize: deviceWidth * 0.12,
                          color: whitePrimary,
                          fontWeight: FontWeight.w300,
                          height: deviceHeight * 0.001)),
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("M",
                      style: TextStyle(
                          fontFamily: 'Chalet',
                          fontSize: deviceWidth * 0.12,
                          color: orangePrimary,
                          fontWeight: FontWeight.w300,
                          height: deviceHeight * 0.001)),
                ),
                SizedBox(height: deviceHeight * 0.04),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("Join room",
                      style: TextStyle(
                          fontFamily: 'Chalet',
                          fontSize: deviceWidth * 0.07,
                          color: whitePrimary,
                          fontWeight: FontWeight.w100,
                          height: deviceHeight * 0.001)),
                ),
                SizedBox(height: deviceHeight * 0.008),

                // email textField
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.85,
                  child: TextField(
                    controller: roomIDController,
                    decoration: InputDecoration(
                        filled: true,
                        fillColor: whitePrimary,
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12),
                            borderSide: BorderSide.none),
                        hintText: 'Enter room ID to join it',
                        hintStyle: const TextStyle(
                            color: Color.fromARGB(255, 174, 173, 173))),
                  ),
                ),

                SizedBox(height: deviceHeight * 0.016),

                Align(
                  alignment: Alignment.bottomRight,
                  child: FloatingActionButton(
                    backgroundColor: orangePrimary,
                    child: const Icon(Icons.arrow_forward_ios_rounded,
                        color: whitePrimary),
                    onPressed: () {},
                  ),
                ),

                SizedBox(height: deviceHeight * 0.020),

                Align(
                  alignment: Alignment.centerLeft,
                  child: Text("My rooms",
                      style: TextStyle(
                          fontFamily: 'Chalet',
                          fontSize: deviceWidth * 0.07,
                          color: whitePrimary,
                          fontWeight: FontWeight.w100,
                          height: deviceHeight * 0.001)),
                ),

                SizedBox(height: deviceHeight * 0.014),

                Expanded(
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: 15,
                    itemBuilder: (BuildContext context, int index) => Card(
                      child: Center(child: Text('Dummy Card Text')),
                    ),
                  ),
                ),
              ]),
        ),
      )),
    );
  }
}

Answer 1

问题是您用

ListView

内的

Expanded

包裹了

Column

，但

Column

没有高度限制，因为它位于

SingleChildScrollView

内。

Expanded

小部件将尝试填充剩余高度，但由于它位于水平运行的可滚动内容内，因此高度没有限制。如果你想保持滚动行为，你应该给

ListView

一个固定的高度，而不是使用

Expanded

:

SizedBox(
  height: 100,
  child: ListView.builder(
    // ...
  ),
),

或者，如果您想让

ListView

实际填充屏幕中的剩余高度，请删除

SingleChildScrollView

小部件。

---

另请参阅：

• 了解约束