簡體   English   中英

Flutter - 如何修復卡片中的文本溢出?

[英]Flutter - How to fix text overflow in a card?

我正在構建一個應用程序,我想顯示此文本,但我需要設置一些“限制”以防止這種情況發生:

有溢出的卡

所以,我嘗試了一些東西(比如 SizedBox 來限制文本,AutoSizeText 來改變字體大小......但我不知道如何限制這一點並使其具有響應性),但無濟於事。

這是卡的代碼:

Card(
    child: Container(
      height: 120,
      child: Padding(
        padding: EdgeInsets.only(
          left: 15,
          right: 15,
          top: 10,
          bottom: 10,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            ClipOval(
              child: Image.network(
                pedido.logomarca,
                height: 90,
                width: 90,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 20),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  SizedBox(
                    child: AutoSizeText(
                      pedido.nomefantasia.toUpperCase(),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      ClipOval(
                        child: Container(
                          height: 10,
                          width: 10,
                          color: Colors.green,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          left: 8,
                        ),
                        child: Text(
                          pedido.statuspedidodescricao,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    DateFormat('dd/MM/yyyy').format(pedido.datavenda),
                    style: TextStyle(
                      color: Colors.blueGrey,
                      fontSize: 14,
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Text(
                      'R\$ ${pedido.valortotal.toStringAsFixed(2).replaceAll('.', ',')}',
                      style: TextStyle(
                        color: Colors.green[600],
                        fontSize: 16,
                      ),
                    ),
                  ),
                  telefone
                      ? OutlineButton(
                          onPressed: () {},
                          splashColor: Colors.green,
                          highlightColor: Colors.green,
                          highlightedBorderColor: Colors.green,
                          child: Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Text('Ligar'),
                              Padding(
                                padding: EdgeInsets.only(left: 3),
                                child: Icon(
                                  Icons.call,
                                  size: 15,
                                ),
                              ),
                            ],
                          ),
                        )
                      : Container(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ),

AutoSized 文本有一個您需要設置的參數。 最大線數:2

AutoSizeText(
  pedido.nomefantasia.toUpperCase(),
  maxlines: 2,
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
),

文檔

改變這個:

Padding(
  padding: EdgeInsets.only(
    left: 8,
       ),
  child: Text(
         pedido.statuspedidodescricao,
         ),
 ),

對此:

    Expanded(
      child: Padding(
        padding: EdgeInsets.only(
          left: 8,
        ),
        child: Text(
          pedido.statuspedidodescricao,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
      ),
    )

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM