水平滚动列表视图。SingleChildScrollView中的生成器-换行内容高度

Question

我的布局是一个带有一些控件的窗体小部件：

Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Form(
          key: widget.addEventFormKey,
          onChanged: () {},
          child: Expanded(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Text(CustomResources.strings["add_event_category_label"], style: TextStyle(fontWeight: FontWeight.bold)),
                  
                  /*some other widgets*/
                  
                  Visibility(
                    child: Container(
                      height: 200.0,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: _attachments?.length,
                        itemBuilder: (context, index) {
                          return Stack(
                            children: [
                              Container(
                                margin: EdgeInsets.fromLTRB(0, 0, 5, 0),
                                child: Stack(
                                  children: [
                                    ClipRRect(
                                      child: Image.file(File(_attachments[index]), cacheWidth: 200),
                                      borderRadius: BorderRadius.circular(8.0),
                                    ),
                                  ],
                                ),
                              ),
                              IconButton(
                                onPressed: () {
                                  File(_attachments[index]).delete();
                                  setState(() => _attachments.remove(_attachments[index]));
                                },
                                icon: Icon(FontAwesomeIcons.trash, color: Colors.white, size: 20),
                                padding: EdgeInsets.only(top: 4, left: 4),
                                constraints: BoxConstraints(),
                              ),
                            ],
                          );
                        },
                      ),
                    ),
                    visible: _attachments.length > 0,
                  ),
                  Visibility(child: Padding(padding: EdgeInsets.fromLTRB(0, 18, 0, 0)),visible: _attachments.length > 0),
                  SizedBox(
                    child: RaisedButton(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: _attachments.length < 3 ? () => _pickImage() : null,
                        padding: EdgeInsets.all(12.0),
                        color: Colors.blue,
                        child: Text(CustomResources.strings["add_event_add_photo_button_label"], style: TextStyle(color: Colors.white))),
                    width: double.infinity,
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );

问题部分是ListView.builder显示水平滚动的图像列表。正如你所看到的，图片总是得到固定的宽度（200）和未知的高度，因为高度取决于图像的宽高比。

我想强制我的ListView.builder扩展到子图像高度（它是单行ListView水平滚动），图像宽度总是200，其他小部件应该放在它下面，没有任何剩余空间。使用当前方法，如果图像高度为

我试图包装列表视图与扩展小部件，而不是容器，但它抛出异常：

RenderFlex子项具有非零的弹性，但传入的高度约束是无界的。

上面说我仍然需要提供身高，但我不想。这个怎么解决？

Answer 1

我认为这在ListView中是不可能的。生成器，因为在构建窗口小部件树时，它与动态项的高度是未知的。相反，我的缩略图小部件必须预先构建，并在构建后添加到行中，并使用SingleChildScrollView将行换行以使其可滚动。因此，我的缩略图列表已准备就绪，可以放到我的表单中了：

class AttachmentsListWidget extends StatelessWidget {
  const AttachmentsListWidget({
    Key key,
    @required this.items,
    @required this.onAttachmentDeleted,
  }) : super(key: key);

  final List<String> items;
  final Function(String) onAttachmentDeleted;

  @override
  Widget build(BuildContext context) {
    var _thumbnailsScrollController = ScrollController();
    final thumbnails = <Widget>[];
    Widget thumbnailsWidget;

    if (items.length > 0) {
      for (int i = 0; i < items.length; i++) {
        thumbnails.add(
          AttachmentWidget(
            attachment: items[i],
            onDeleteClicked: (String attachment) => onAttachmentDeleted(attachment),
          ),
        );
      }
      thumbnailsWidget = Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Scrollbar(
              isAlwaysShown: true,
              controller: _thumbnailsScrollController,
              child: SingleChildScrollView(
                controller: _thumbnailsScrollController,
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: thumbnails,
                  crossAxisAlignment: CrossAxisAlignment.start,
                ),
              ),
            ),
          ],
        ),
      );
    } else {
      thumbnailsWidget = Container();
    }
    return thumbnailsWidget;
  }
}

（也总是可见滚动条添加）。

Answer 2

如果您得到RenderFlex，则子项具有非零flex，但传入的高度约束是无界的 尝试下面的代码，希望对您有所帮助。在Expanded（）小部件中添加列，并在代码中删除SingleChildScrollView（）

Expanded(
  child: Column(
     children:[
     //Your Widgets
      ],
   ),
),