flutter - RenderBox 没有布局(SingleChildScrollView with ListView.Builder)

Question

我在将小部件树包装在 SingleChildScrollView 中时遇到了一些问题.我认为 ListView.Builder 与此有​​关，但这里最好的方法是什么？我想要一个 vertical scroll用于小部件树和水平滚动 ListView.Builder .如果我取下 SingleChildScrollView 它工作正常。

@override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        'Some test',
                        style: muli_bold_18_black,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, right: 30),
                      child: Container(
                          width: 96,
                          height: 96,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://placeimg.com/640/480/any")))),
                    )
                  ],
                ),
                Container(
                  transform: Matrix4.translationValues(0.0, -30.0, 0.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Text(
                            "Another text",
                            style: muli_bold_11_black),
                      ),
                    ],
                  ),
                ),
                buildSection("Other text"),
                Expanded(
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: lessons.length,
                    itemBuilder: (BuildContext context, int index) =>
                        // build card here
                  ),
                )
              ],
            ),
          ),
        );
      }

错误信息:

RenderBox was not laid out: RenderFlex#a24d7 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'

Answer 1

如果您使用的是水平 ListView.Builder，则元素的高度必须是固定的。因此，只需将您的 Expanded 替换为 SizedBox或 Container固定高度，您的问题将得到解决。

@override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        'Some test',
                        style: muli_bold_18_black,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, right: 30),
                      child: Container(
                          width: 96,
                          height: 96,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://placeimg.com/640/480/any")))),
                    )
                  ],
                ),
                Container(
                  transform: Matrix4.translationValues(0.0, -30.0, 0.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Text(
                            "Another text",
                            style: muli_bold_11_black),
                      ),
                    ],
                  ),
                ),
                buildSection("Other text"),
                SizedBox(
                  height: 50
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: lessons.length,
                    itemBuilder: (BuildContext context, int index) =>
                        // build card here
                  ),
                )
              ],
            ),
          ),
        );
      }