Flutter - 自定义高度中的 TextField 溢出答案

【问题标题】：Flutter - TextField overflow in custom heightFlutter - 自定义高度中的 TextField 溢出
【发布时间】：2021-10-28 09:39:43
【问题描述】：

在我的文本视图中，有时它的值是动态来自服务器的，当文本很大时它会占用两行并溢出视图，就像所附图片一样。

代码：

  class ShopsCard extends StatelessWidget {
  final UniqueShop uniqueShop;

  ShopsCard({this.uniqueShop});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) =>
                  SearchScreen(
                    searchArguments: SearchArguments(
                        searchType: "campaign_shop_click",
                        campaignShopSlug: uniqueShop.sellerShopSlug,
                        searchDisplayName: uniqueShop.sellerShopBuisnessName),
                  )),
        );
      },
      child: Container(
        height: 144,
        width: 104,
        margin: EdgeInsets.only(right: 8.0),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(10)),
        padding: EdgeInsets.only(left: 15.0, right: 15.0, top: 10, bottom: 15.0),
        child: Column(
          children: [
            Container(
                height: 95.0,
                width: 104,
                child: uniqueShop.sellerShopImage != null
                    ? populateNetworkImage(imgUrl: uniqueShop.sellerShopImage)
                    : Icon(
                        Icons.image,
                        size: 50,
                      )),
            if (uniqueShop.sellerShopBuisnessName != null)
              Text(
                uniqueShop.sellerShopBuisnessName,
                maxLines: 2,
                textAlign: TextAlign.center,
                style: commonDmSansTextStyle(
                    fontSize: 12, fontWeight: FontWeight.w500, color: darkColor),
              )
          ],
        ),
      ),
    );
  }
}

谁能告诉我我的代码有什么问题，我该如何解决！

【问题讨论】：

我的回答对你有用吗？
我以另一种方式解决了它，这里子小部件超过了父容器高度，这就是我收到此错误的原因。我解决了它以减少底部填充发生了多少渲染弯曲。谢谢兄弟的回答。

标签： flutter flutter-widget

【解决方案1】：

您可以将最大行号设置为 1 并在文本溢出时显示省略号

方法如下：

Text(
  // ...
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

【讨论】：

【解决方案2】：

使用Expanded 小部件包装您的文本，或者您可以使用overflow: TextOverflow.ellipsis,

 Expanded(
                child: Text(
                  uniqueShop.sellerShopBuisnessName,
                  maxLines: 2,
                  textAlign: TextAlign.center,
                  style: commonDmSansTextStyle(
                      fontSize: 12, fontWeight: FontWeight.w500, color: darkColor),
                ),
              )

【讨论】：