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

Answer 2

要解决此问题，我只需要将Expanded替换为Container并给它一个height。并将顶部的Column（第一个）小部件替换为ListView

未布置RenderBox（带有ListView.Builder的SingleChildScrollView）

2 个答案: