如何将大字符串放入多行文本中？我的文字越来越多

Question

Card(
                          margin: const EdgeInsets.all(10),
                          elevation: 10,
                          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                          child: Stack(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(15),
                                    child: Container(

                                      height: 90,
                                      width: 120,
                                      decoration: widget.searchdata.responseData![index].featuredImg == null ? const BoxDecoration(image:DecorationImage(image:  NetworkImage('https://staging.motorgate.com/assets/image/default_garage_img.png'), fit: BoxFit.fill),shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(8.0)) ):BoxDecoration(image:DecorationImage(image:  NetworkImage(baseURL+imgName), fit: BoxFit.fill),shape: BoxShape.rectangle,borderRadius: const BorderRadius.all(Radius.circular(8.0)) ),
                                    ),
                                  ),
                                  Align(
                                    alignment: Alignment.topLeft,
                                    child: Flexible(
                                      child: Column(
                                        mainAxisAlignment: MainAxisAlignment.start,
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: [
                                          Text('${widget.searchdata.responseData![index].cntrName}',maxLines: 2,
                                            style: TextStyle(color: Colors.black,fontSize: 12,fontFamily: 'Poppins',fontWeight: FontWeight.bold),),
                                          Text(
                                            '${widget.searchdata.responseData![index].cntrCity}',style: TextStyle(color: Colors.grey,fontSize: 9,fontFamily: 'Poppins',fontWeight: FontWeight.bold),),
                                          Row(
                                            children: [
                                              Icon(CupertinoIcons.star_fill,color: Colors.amberAccent,size: 15,),
                                              Text('${widget.searchdata.responseData![index].srvcCntrAvgRating}',style: TextStyle(color: Colors.amberAccent,fontSize: 9,fontFamily: 'Poppins',fontWeight: FontWeight.bold)),
                                            ],
                                          )

                                        ],
                                      ),
                                    ),
                                  )
                                ],
                              ),
                              Positioned(
                                right: 5,
                                top: 5,
                                child: IconButton(icon : const Icon(CupertinoIcons.heart,color: Colors.pink,),onPressed: (){},),),
                              Positioned(
                                right: 5,
                                top: 60,
                                child: IconButton(
                                  // Use the MdiIcons class for the IconData
                                    icon: new Icon(MdiIcons.whatsapp,color: Colors.green,),
                                    onPressed: () {
                                      openwhatsapp();
                                    }
                                ),)
                            ],
                          ),
                        ),

Answer 1

您可以在文本小部件中使用 maxLines: 属性，例如：

Text('Flutter Demo App',maxLines: 3,);

如果您在行中使用文本，那么您可以使用文本的扩展小部件来消除溢出

Answer 2

您可以在 Text() 小部件中添加任意多行文本。只需确保 Text() 小部件的父级具有确定的宽度，否则 flutter 会尝试在一行中填充所有文本。

Container(
    width: 300,
    child: Text('In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be'),
);

Answer 3

试试下面的代码希望对你有帮助。只需将您的 Column 添加到 Expanded 并将您的小部件更改为我的小部件。参考我的回答也

 Card(
                margin: const EdgeInsets.all(10),
                elevation: 10,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Stack(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(15),
                          child: Container(
                            height: 90,
                            width: 120,
                          ),
                        ),
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                ' {widget.searchdata.responseData![index].cntrName}',
                                maxLines: 3,
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 12,
                                  fontFamily: 'Poppins',
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                ' {widget.searchdata.responseData![index].cntrCity}',
                                maxLines: 3,
                                style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 9,
                                  fontFamily: 'Poppins',
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Row(
                                children: [
                                  Icon(
                                    Icons.star,
                                    color: Colors.amberAccent,
                                    size: 15,
                                  ),
                                  Expanded(
                                    child: Text(
                                      ' {widget.searchdata.responseData![index].srvcCntrAvgRating}',
                                      style: TextStyle(
                                        color: Colors.amberAccent,
                                        fontSize: 9,
                                        fontFamily: 'Poppins',
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ],
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                    Positioned(
                      right: 5,
                      top: 5,
                      child: IconButton(
                        icon: Icon(
                          Icons.favorite,
                          color: Colors.pink,
                        ),
                        onPressed: () {},
                      ),
                    ),
                    Positioned(
                      right: 5,
                      top: 60,
                      child: IconButton(
                          // Use the MdiIcons class for the IconData
                          icon: Icon(
                            Icons.phone,
                            color: Colors.green,
                          ),
                          onPressed: () {}),
                    )
                  ],
                ),
              ),

您的结果屏幕->

如何将大字符串放入多行文本中？我的文字越来越多

How to Put large string in multiline text? My text is getting overflowed

overflow

textfield

dart

android-studio

flutter