Início / coding / Perguntas / 79583987
Accepted
Alexander L. Belikoff
Asked: 2025-04-21 11:24:55 +0800 CST

Flutter UI: Texto + Ícone centralizado com gerenciamento de estouro

  • 772

Gostaria de ajuda com a implementação idiomática deste recurso de interface. Suponha que eu queira uma combinação de um IconButtone Text(por exemplo, um nome precedido por um asterisco). Gostaria de posicioná-lo em um Row(que, por sua vez, está em um contêiner, como Column). No entanto, quero garantir que os seguintes requisitos sejam atendidos (veja o esboço em anexo):

  • O ícone está bem na frente do texto (ou seja, sem espaçamento extra entre eles)
  • Quando o texto é curto o suficiente, esse par de widgets é centralizado na linha.
  • Se o texto for muito longo, ele será recortado corretamente (por exemplo, com reticências) sem transbordar.

insira a descrição da imagem aqui

Até agora, não tive muito sucesso em fazer isso funcionar. Se eu colocar dois Spacerwidgets nas laterais, o texto resultante é recortado de forma muito agressiva. Se eu o envolvo em Expanded, recebo exceções flexíveis. Considerando que é aparentemente uma forma bastante popular de apresentar texto, qual é a maneira do Flutter de organizá-lo?

flutter

2 respostas

  1. Você pode usar Flexibleo Widget

    assim

    Container(
  width: 300,
  height: 50,
  decoration: BoxDecoration(
    color: Colors.cyan,
    border: Border.all(color: Colors.black, width: 0.5),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.star, color: Colors.white),
      Flexible(
        child: const Text(
          'This is a test ',
          overflow: TextOverflow.ellipsis,
        ),
      ),
    ],
  ),
)
    • 3
  2. Best Answer

    Tentei o código abaixo conforme a imagem fornecida. Espero que ajude você.

    Container(
            padding: EdgeInsets.all(5),// manage padding on your need
            decoration: BoxDecoration(
              color: Colors.blue.shade200,
              border: Border.all(color: Colors.black, width: 0.5),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize:
                  MainAxisSize.min, // add  MainAxisSize.min for your container width along with text
              children: [
                Icon(Icons.star, color: Colors.white),
                Flexible(
                  child: const Text(
                    'So far, I have been very successful in making this work. ',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),

    Telas de resultados:

    insira a descrição da imagem aqui

    insira a descrição da imagem aqui

    • 1

relate perguntas