约束列的最大宽度与 Flutter 中特定子项的宽度？

Question

必须连续显示 3 个项目：图像和下面的描述，所以它基本上是 Columns 的 Row。描述大小各不相同，可以超过或小于图像的宽度。如果需要，这些图像必须均匀排列，说明多行。

所以朴素的代码大致是这样的：

@override
  Widget build(BuildContext context) => Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          for (final item in items)
            Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Image.asset(item.depiction),
                Text(
                  item.name,
                  textAlign: TextAlign.center,
                ),
              ],
            )
        ],
      );

问题是Column 的大小是由文本大小的宽度决定的，如果它超过了图像的大小，那么Row 中的图像间隔不均匀。我看到的解决方案是将Column 的宽度限制为Image 的宽度，例如使用某种Builder 小部件，但它似乎根本不对。

我尝试用Expanded 包裹所有Row 的孩子，但随后spaceAround 没有任何效果，因为所有孩子的大小都为Row 的1/3，并且此间距至关重要，其中可用空间的值应为row.length - 3 * image.size（伪代码给出一个总体思路）。用Flexible 包裹Column 并将stretch 交叉轴对齐设置为相同的Column 会产生相同的效果——Column 的大小为Row 长度的1/3。

将Text 宽度限制为图像宽度为maxWidth 的正确方法是什么？

图片：

在第三个Row 中它可以正常工作，因为Text 的宽度小于图像的宽度。

第二个RowText的宽度大于图片的宽度，所以Column的大小是一行文字宽度，图片的布局不等于前一个。

第一个Row 是我希望第二个Row 呈现的方式，在此示例中，它只是分离的(\n) 描述，导致我寻求的视觉效果。

Answer 1

这是我在堆栈溢出中看到的第三个问题。

我刚刚为它写了一个包：https://pub.dev/packages/flex_with_main_child

您可以将 Column 替换为来自 flex_with_main_child 的 ColumnWithMainChild。

Column(
  mainAxisSize: MainAxisSize.min,
  mainChild: Image.asset(item.depiction),
  childrenBelow: <Widget>[
    Text(
      item.name,
      textAlign: TextAlign.center,
    ),
  ],
)

Answer 2

所以我现在最终得到了一个我不满意的非常老套的解决方案，但仍然将它发布给寻求相同答案的人：

typedef ImageBasedBuilder = Widget Function(
    BuildContext context, ImageInfo image);

class ImageInfoBasedWidget<T> extends StatefulWidget {
  final ImageProvider<T> provider;
  final ImageBasedBuilder builder;

  const ImageInfoBasedWidget({
    @required this.provider,
    @required this.builder,
    Key key,
  }) : super(key: key);

  @override
  _ImageInfoBasedWidgetState<T> createState() =>
      _ImageInfoBasedWidgetState<T>();
}

class _ImageInfoBasedWidgetState<T>
    extends State<ImageInfoBasedWidget<T>> {
  ImageStream _imageStream;
  ImageStreamListener _streamListener;
  ImageInfo _imageInfo;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _resolveImage();
  }

  @override
  void didUpdateWidget(ImageInfoBasedWidget<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.provider != widget.provider) {
      _resolveImage();
    }
  }

  @override
  void dispose() {
    _imageStream.removeListener(_streamListener);
    super.dispose();
  }

  void _resolveImage() {
    final ImageStream oldImageStream = _imageStream;
    _imageStream =
        widget.provider.resolve(createLocalImageConfiguration(context));
    if (_imageStream.key != oldImageStream?.key) {
      final ImageStreamListener listener = ImageStreamListener(_provideImage);
      oldImageStream?.removeListener(listener);
      _imageStream.addListener(listener);
    }
  }

  void _provideImage(ImageInfo imageInfo, bool syncCall) =>
      setState(() => _imageInfo = imageInfo);

  @override
  Widget build(BuildContext context) {
    if (_imageInfo == null) {
      return Container();
    } else {
      return widget.builder(context, _imageInfo);
    }
  }
}

这很简单——我们只是获得了稍后将由构建器对象函数使用的图像配置。我们可以使用ConstrainedBox 放置文本约束，这将具有maxWidth 的imageInfo.image.width。

Answer 3

我想这就是你想要的：

Image 1

Image 2

Image 3

代码：

class ClassName extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],

      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text('This is the solution', style: TextStyle(color: Colors.black, fontSize: 18.0),),
      ),

      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              col(context),
              col(context),
              col(context),
            ],
          ),
        ],
      ),
    );
  }
}

col(context){
  return SizedBox(
    width: MediaQuery.of(context).size.width*0.3,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        SizedBox(height: 100.0, child: Image.asset('assets/02.jpg')),
        Text('smith smith smith smith smith smith smith', textAlign: TextAlign.center),
      ],
    ),
  );
}

Answer 4

您可以像这样将Columns 包裹在固定宽度的SizedBoxs 中..

SizedBox(
        width: 200,
        child: Column(
          children: [
            Image.asset(item.depiction),
            Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et',
            ),
          ],
        ),
      )