Question

布局定义如下：

 var cardLayout = Flexible(
              child: new Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      child: Row(children: <Widget>[
                        Text(categoryIcon,style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal)),
                        Text("   " + categoryName, maxLines: 3, style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)) //Overflow!!
                      ]),
                      padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
                    ),
                    Padding(
                      child: Text(title, maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16)),
                      padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
                    ),
                    Padding(
                      child: new Text(address, style: TextStyle(fontStyle: FontStyle.normal)),
                      padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
                    ),

                    Visibility(
                    child: Padding(
                      child: new Text("⬤   " + statusName, style: TextStyle(fontStyle: FontStyle.normal,color:HexColor(statusColor))),
                      padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
                    ),
                      visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT|| type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
                    )
                  ],
                ),
              )
          );

我不明白为什么类别标签不是多行。它溢出（我在粘贴的代码中添加了注释，以显示我的意思是标签）。看来问题是行。如何保留行，但使标签变为多行？

Answer 1

Simpy Wrap Text小部件带有-Flexible，使其变为多行。

 Flexible(
                child: Text("   " + categoryName,
                    maxLines: 3,
                    style: TextStyle(
                        color: Colors.lightBlue,
                        fontWeight: FontWeight.normal)),
              ),

Flutter-行内的多行标签

1 个答案: