如何获取父窗口小部件的宽度

时间:2019-05-27 15:55:17

标签: flutter flutter-layout

我有一个卡片视图小部件,里面有一个 Text小部件,但显示为1.00pixels溢出
是否可以通过任何方式将文本设置为适合父级宽度

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


此处getDetailsItems返回包含 Text Widget

的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;
  }

enter image description here


看起来您的帖子大部分是代码;请添加更多详细信息。
看起来您的帖子大部分是代码;请添加更多详细信息。

1 个答案:

答案 0 :(得分:1)

作为Row的直接子代,您可以用Align小部件包装Flexible小部件。这将防止其子溢出。请注意,这只能用于RenderFlexColumn的{​​{1}}小部件的直接子级。因此,在您的情况下:

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