如何解决文本溢出

时间:2018-09-07 09:29:46

标签: flutter flutter-layout

我正在尝试从数据库中检索数据。问题中包含128个单词,显示533 pl给我溢出了...我该如何解决..以下是我的代码

文本代码

Padding(
                        padding: EdgeInsets.only(top: 2.0,),
                        child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.blueGrey,),),
                      ),

我的完整代码

new GestureDetector(
      child: new Card(
        elevation: 2.0,
        margin: const EdgeInsets.all(5.0),
        child:
        new Stack(
          alignment: Alignment.center,
          children: <Widget>[
            new Align(
              child: new Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Text(questonnd.rate.toString()),
                      Stack(
                        children: <Widget>[
                          Padding(padding: EdgeInsets.all(6.0),
                            child:  new Container(
                              child: Center(
                                child: Text("${questonnd.comment}"),
                              ),
                              width: 20.0,
                              height: 20.0,
                              decoration: new BoxDecoration(
                                shape: BoxShape.circle,
                                image: new DecorationImage(
                                    fit: BoxFit.fill,
                                    image: new AssetImage("assets/comment.png")),
                              ),
                              margin: const EdgeInsets.symmetric(
                                  horizontal: 20.0),
                            ),)
//
                        ],
                      ),
                    ],
                  ),

                  Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 2.0,),
                        child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.blueGrey,),),
                      ),
                      Row(
                        children: <Widget>[
                          questonnd.releventTag!=null?new Container(
                            decoration: new BoxDecoration(
                                color: Colors.greenAccent,
                                shape: BoxShape.rectangle,
                                borderRadius: BorderRadius.circular(6.0)
                            ),
                            margin: const EdgeInsets.symmetric(
                                horizontal: 20.0),
                            child: Padding(padding: EdgeInsets.all(3.0),
                              child: Text(questonnd.releventTag,style: TextStyle(color: Colors.white),),),
                          ):questonnd.releventTag2!=null?new Container(
                            decoration: new BoxDecoration(
                                color: Colors.black54,
                                shape: BoxShape.rectangle,
                                borderRadius: BorderRadius.circular(2.0)
                            ),
                            margin: const EdgeInsets.symmetric(
                                horizontal: 20.0),
                            child: Padding(padding: EdgeInsets.all(3.0),
                              child: Text(questonnd.releventTag2,style: TextStyle(color: Colors.white),),),
                          ):questonnd.releventTag3!=null?new Container(
                            decoration: new BoxDecoration(
                                color: Colors.black54,
                                shape: BoxShape.rectangle,
                                borderRadius: BorderRadius.circular(2.0)
                            ),
                            margin: const EdgeInsets.symmetric(
                                horizontal: 20.0),
                            child: Padding(padding: EdgeInsets.all(3.0),
                              child: Text(questonnd.releventTag3,style: TextStyle(color: Colors.white),),),
                          ):new Container(),
                          questonnd.releventTag4!=null?Row(
                            children: <Widget>[
                              Icon(Icons.message),
                              Text(questonnd.releventTag4.toString())
                            ],
                          ):new Container()

                        ],
                      ),
                      questonnd.releventTag5!=null?Padding(padding: EdgeInsets.all(2.0),
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.remove_red_eye),
                            Text(questonnd.releventTag5.toString())
                          ],
                        ),):new Container()


                    ],
                  )
                ],
              ),
              alignment: Alignment.bottomCenter,
            ),
          ],
        ),
      ),
      onTap: () {
        Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Fullscreenquestion(questionNd: questonnd,)));
      },
    );
  }
} 

1 个答案:

答案 0 :(得分:1)

您应该尝试将孩子包裹在Container中,并固定宽度。它发生在我这里:Flutter- wrapping text,尽管它需要一些变通方法来以独立于平台的方式设置宽度,但它也可以工作。