flutter - 如何获取父Widget的宽度

Question

我有一个卡片 View 小部件，里面有一个文本小部件，但它显示溢出了 1.00 像素
有没有办法设置文本适合父宽度

Container(
            child: Card(
              margin: EdgeInsets.only(left: 10, right: 10),
              child: Column(
                children: getDetailsItems(),
              ),
            ),
          ),

这里 getDetailsItems 返回一个 Widget 列表，它包括 Text Widget

List<Widget> getDetailsItems() {
    List<Widget> l = [];

    if (mItem.mServiceDetail != null) {
      for (int i = 0; i < mItem.mServiceDetail.length; i++) {
        Row r1 = Row(
          children: <Widget>[],
        );
        Align a1 = Align(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Container(
                child: SizedBox(
              width: 24,
              height: 24,
              child: Image.network(mItem.mServiceDetail[i].img),
            )),
          ),
          alignment: Alignment.centerLeft,
        );
        Align a2 = Align(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: Container(

                child: Align(
              child:  Text(
                (mItem.mServiceDetail[i].title == null
                    ? ""
                    : mItem.mServiceDetail[i].title),
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
              ),
            )),
          ),
          alignment: Alignment.topRight,
        );

        r1.children.add((a1));
        r1.children.add((a2));

        l.add(r1);
      }
    }

    return l;
  }

看起来您的帖子主要是代码；请添加更多详细信息。
看起来您的帖子主要是代码；请添加更多详细信息。

Answer 1

作为您的 Row 的直接子级，您可以使用 Flexible 小部件包装您的 Align 小部件。这将防止它的 child 溢出。请注意，这只能用于 RenderFlex 小部件的直接子级，如 Column 或 Row。所以在你的情况下:

Flexible a2 = Flexible(
  child: Align(
    child: Padding(
      padding: EdgeInsets.all(10),
      child: Container(
        child: Align(
          child: Text(
            mItem.mServiceDetail[i].title == null
                ? ""
                : mItem.mServiceDetail[i].title,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(fontWeight: FontWeight.w500, fontSize: 16),
          ),
        ),
      ),
    ),
    alignment: Alignment.topRight,
  ),
);

我添加了 overflow: TextOverflow.ellipsis 属性以使其可见。

作为一般提示，我建议您直接添加 Row 之类的子项，并跳过使用这些局部变量，因为 Flutter 中的大多数内容都是立即添加的它的声明形式。所以你的方法应该是这样的:

List<Widget> getDetailsItems() {
  List<Widget> l = [];

  if (mItem.mServiceDetail != null) {
    for (int i = 0; i < mItem.mServiceDetail.length; i++) {
      l.add(
        Row(
          children: <Widget>[
            Align(
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Container(
                  child: SizedBox(
                    width: 24,
                    height: 24,
                    child: Image.network(mItem.mServiceDetail[i].img),
                  ),
                ),
              ),
              alignment: Alignment.centerLeft,
            ),
            Flexible(
              child: Align(
                alignment: Alignment.topRight,
                child: Padding(
                  padding: EdgeInsets.all(10),
                  child: Container(
                    child: Align(
                      child: Text(
                        mItem.mServiceDetail[i].title == null
                            ? ""
                            : mItem.mServiceDetail[i].title,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                            fontWeight: FontWeight.w500, fontSize: 16),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  }
  return l;
}

看到您使用此函数以特定方式创建这些条目也是一个很好的指示，它应该是一个 Widget 本身，因此您甚至可以创建一个新的 StatefulWidget为此。