Flutter - 辅助复杂的小部件布局答案

【问题标题】：Flutter - assistance with complex widget layoutFlutter - 辅助复杂的小部件布局
【发布时间】：2020-12-25 17:05:54
【问题描述】：

我正在设计一个从电子商务商店 API 提取数据的购物应用。我为商店项目创建了这个布局：

每个项目都是一个以 Row 作为主要子项的 Card，其中包含 Image 小部件和两个用于文本的 Column。第一列包含标题和副标题，而第二列包含价格。现在看起来不错，但是如果字幕再大一点，就会出现这种情况：

我希望将标题和价格组合在一起，标题左对齐，价格右对齐，副标题能够占据卡片剩余的宽度。

我熟悉 Flutter 布局的工作原理，但这项任务似乎有点超出我的想象。即使达到这个阶段也是一个真正的挑战。我知道可以使用 LayoutBuilder 获得父级的高度和宽度，但是这种事情需要计算兄弟的宽度（可能还有高度），我不知道该怎么做。所以这里的任何帮助都会很好。

这是小部件的代码：

import 'package:flutter/material.dart';

class ProductItem extends StatelessWidget {
  final String name;
  final String shortDescription;
  final double price;
  final String imageUrl;

  ProductItem({this.name, this.shortDescription, this.price, this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4.0),
      child: Card(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Image.network(
              imageUrl,
              fit: BoxFit.fill,
              width: MediaQuery.of(context).size.width * 0.3,
            ),
            SizedBox(width: 15,),
            Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  name,
                  textAlign: TextAlign.left,
                  style: new TextStyle(
                    fontSize: 20.0,
                    color: const Color(0xFF000000),
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  shortDescription,
                  textAlign: TextAlign.left,
                  style: new TextStyle(
                    fontSize: 16.0,
                    color: const Color(0xFF000000),
                    fontWeight: FontWeight.w200,
                  ),
                ),
              ],
            ),
            SizedBox(width: 20),

            Expanded(
              child: Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '฿${price.toStringAsFixed(0)}',
                    textAlign: TextAlign.right,
                    style: new TextStyle(
                      fontSize: 20.0,
                      color: const Color(0xFF000000),
                      fontWeight: FontWeight.w500,
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

尝试用 Expanded 小部件包装 shortDescription Text 小部件，并将 Text 小部件中的 maxLines 设置为 2 或根据您的偏好设置，如下所示：

Expanded(
  child: Text(
    shortDescription,
    maxLines: 2,
    textAlign: TextAlign.left,
    style: new TextStyle(
      fontSize: 16.0,
      color: const Color(0xFF000000),
      fontWeight: FontWeight.w200,
      ),
   ),
),

【讨论】：