在 Flutter web 上不使用宽度将小部件与图像对齐

Question

嗨，如何在不使用固定宽度的情况下对齐图像下方的小部件？我不想使用固定宽度（或者可以使用固定宽度，但只要它能够通过调整大小进行调整）的原因是因为在调整大小时我想缩小侧面间距以关闭，而小部件可以与左侧对齐图像。

这是预期的布局

这是当浏览器宽度调整为更小的宽度时的预期行为（在保持布局的同时缩小侧面的间距

这是我当前的代码

Scaffold(
  body: Container(
    width: Sizes.dynamicWidth(context),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [
          FabricColors.ashGrey.withOpacity(.4),
          FabricColors.ashGrey.withOpacity(.2),
          FabricColors.ashGrey.withOpacity(0),
        ],
      ),
    ),
    child: Align(
      alignment: Alignment.topCenter,
      child: Container(
        child: ListView(
          children: [
            Container(
              height: Sizes.dynamicHeight(context) * .8,
              child: CachedNetworkImage(
                cacheKey: Uri.parse(widget.media.data.imageUrl!).replace(queryParameters: new Map<String, dynamic>()).toString(),
                imageUrl: widget.media.data.imageUrl!,
                fit: BoxFit.cover,
                placeholder: (_, url) => _buildPlaceholder(),
                errorWidget: (context, url, error) {
                  BlocProvider.of<FabricImageBloc>(context).add(FabricImageErrorEvent(error));
                  return _buildError(boxDecoration, i, defaultAsset);
                },
              ),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                padding: Spaces.smallAll,
                margin: Spaces.smallAll,
                width: Sizes.dynamicWidth(context) - 900,
                decoration: BoxDecoration(color: FabricColors.boscoGrey, borderRadius: Radiuses.mediumCircle),
                child: IntrinsicHeight(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Avatar(
                                url: widget.avatarUrl,
                                size: Sizes.small,
                              ),
                              Spaces.miniWidth,
                              FabricText(
                                widget.media.role,
                                style: FabricTheme.of(context).pastelPurpleTextTheme.caption3,
                              )
                            ],
                          ),
                          SvgIcon(Assets.lib.assets.svg.moreHorizontal),
                        ],
                      ),
                      Spaces.smallHeight,
                      FabricText(
                        widget.media.title,
                        style: FabricTheme.of(context).blancoTextTheme.bodySmall,
                      ),
                      Spaces.smallHeight,
                      Expanded(
                        child: FabricText(
                          widget.media.description,
                          style: FabricTheme.of(context).blancoTextTheme.caption3,
                        ),
                      ),
                      Spaces.smallHeight,
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Answer 1

尝试下面的代码希望对您有所帮助。只需将我的小部件替换为您的

Scaffold(
    body: Container(
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.grey.withOpacity(.4),
            Colors.grey.withOpacity(.2),
            Colors.grey.withOpacity(0),
          ],
        ),
      ),
      child: Align(
        alignment: Alignment.topCenter,
        child: SingleChildScrollView(
          padding: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Image.network(
                'https://media.istockphoto.com/id/1317323736/photo/a-view-up-into-the-trees-direction-sky.jpg?s=612x612&w=0&k=20&c=i4HYO7xhao7CkGy7Zc_8XSNX_iqG0vAwNsrH1ERmw2Q=',
              ),
              SizedBox(height: 10),
              Align(
                alignment: Alignment.topLeft,
                child: Container(
                  padding: EdgeInsets.all(5),
                  margin: EdgeInsets.all(2),
                  width: 400,
                  decoration: BoxDecoration(
                      color: Colors.grey,
                      borderRadius: BorderRadius.circular(20)),
                  child: IntrinsicHeight(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Icon(Icons.person),
                                SizedBox(width: 20),
                                Text('Title')
                              ],
                            ),
                            Icon(Icons.more_vert)
                          ],
                        ),
                        SizedBox(height: 20),
                        Text('title'),
                        SizedBox(height: 10),
                        Expanded(
                          child: Text(
                              'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo'),
                        ),
                        SizedBox(height: 10),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),