颤动 UI 扭曲

Question

您好，我正在尝试使用

构建和 UI

标题

IMG

描述

但是因为我的标题是 2 大主要是 2 行我得到 EXCEPTION CAUGHT BY RENDERING LIBRARY 我的代码如下：

Widget _buildRowItem() {
    final Row mainRow = new Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        new Text(_feed.getTitle(),
            maxLines: 2, softWrap: true, textAlign: TextAlign.start),
      ],
    );
    final Container container = new Container(
      child: mainRow,
      padding: const EdgeInsets.all(4.0),
      color: Colors.teal,
    );

    return container;
  }

输出：

Answer 1

按照您的方法就快完成了！

添加一个灵活的包装器并完成。

  Widget _buildRowItem() {
final Row mainRow = new Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    new Flexible(child: new Text('some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text ',
        maxLines: 2, softWrap: true, textAlign: TextAlign.start))

  ],
);
final Container container = new Container(
  child: mainRow,
  padding: const EdgeInsets.all(4.0),
  color: Colors.teal,
);

return container;

}

Answer 2

感谢您的回复，

在这之间解决了我的问题

Widget _buildRowItem() {
    final Column column = new Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Text(_feed.getTitle(),
            textAlign: TextAlign.start,
            softWrap: true,
            maxLines: 2,
            overflow: TextOverflow.ellipsis),
        new Container(height: 8.0),
        new Image.network(
          _feed.getImageUrl(),
          height: 164.0,
          fit: BoxFit.fitWidth,
        )
      ],
    );
    final Container container =
        new Container(padding: const EdgeInsets.all(8.0), child: column);

    return new Card(child: container);
  }

UI:

Answer 3

you can use here Extended or Flexible with container specific hight

for example

 Container(
            width: MediaQuery.of(context).size.width / 1.3,
            height: MediaQuery.of(context).size.height/3.5,
            padding: EdgeInsets.all(0.5),
            child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                verticalDirection: VerticalDirection.down,
                textDirection: TextDirection.ltr,
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                children:
                List.generate(mEmiMessagesList.length, (index) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Wrap(
                        children: <Widget>[
                          Text(
                            mEmiMessagesList[index].mValue,
                            textDirection: TextDirection.ltr,
                          )
                        ],
                      ),
                    ],
                  );
                })),
          ),

颤动 UI 扭曲

Flutter UI distorted

dart

flutter

flutter-layout