AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 79583114
Accepted
Prakash kumar M
Prakash kumar M
Asked: 2025-04-20 15:03:20 +0800 CST2025-04-20 15:03:20 +0800 CST 2025-04-20 15:03:20 +0800 CST

Flutter: Texto sobreposto ao widget posicionado no layout de pilha

  • 772

Estou trabalhando em um layout do Flutter onde tenho uma lista de modos de transporte (como caminhada, carro, ônibus, trem) e estou colocando um avatar de perfil no topo usando um Stackwidget Positioned.
Aqui, o avatar do perfil não está dentro da 1ª linha.
Esta é a IU de amostra.

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text("Walk"),
          Text("Car"),
          Text("Bus"),
          Text("Train"),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

Tudo funciona bem até que o texto fique muito longo , como neste caso.
Se o texto for muito longo, é assim que ele pinta a interface do usuário problemática.

Tentei ajustar manualmente o texto em "sizedbox" com uma largura fixa para evitar sobreposições.
Mas isso não funciona em todos os casos.

Stack(
  children: [
    Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Row(
            children: [
              Icon(Icons.directions_walk),
              SizedBox(width: 8),
              // Manually restrict text width to avoid overlap
              SizedBox(
                width: 80, // <-- hardcoded width
                child: Text("Walk Walk Walk"),
              ),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_car),
              SizedBox(width: 8),
              Text("Car"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.directions_bus),
              SizedBox(width: 8),
              Text("Bus"),
            ],
          ),
          Row(
            children: [
              Icon(Icons.train),
              SizedBox(width: 8),
              Text("Train"),
            ],
          ),
        ],
      ),
    ),
    Positioned(
      top: 0,
      right: 0,
      child: CircleAvatar(
        radius: 24,
        child: Icon(Icons.person),
      ),
    ),
  ],
)

Existe uma maneira melhor de organizar isso para que o Positionedwidget não interfira no layout do texto abaixo — sem codificar as larguras

flutter
  • 1 1 respostas
  • 50 Views

1 respostas

  • Voted
  1. Best Answer
    Ricardo Alexis Huerta Salazar
    2025-04-20T15:50:24+08:002025-04-20T15:50:24+08:00

    Eu sugeriria seguir estes 2 passos:

    1. Coloque o widget Text("Walk Walk Walk") dentro de um widget Expandido:

      Expanded(child: Text("Walk Walk Walk")),
      
    2. Adicione um SizedBox com largura de 32 no final da linha:

    Row(
      children: [
        Icon(Icons.directions_walk),
        SizedBox(width: 8),
        // Expanded will use all the remaining space in the row
        Expanded(child: Text("Walk Walk Walk")),
        SizedBox(width: 32),
      ],
    );
    

    Por que "32"? Seu CircleAvatar tem um raio de 24, então sua largura é 48. E você adicionou um preenchimento de 16 à sua Column. Então, se você subtrair 48 - 16 = 32. Este é o espaço necessário para evitar a sobreposição.

    Dessa forma você evita sobreposições e aproveita todo o espaço restante, independente do tamanho da tela:

    Exemplo de tela estreita

    Exemplo de tela ampla

    Além disso, você deve considerar a criação de uma variável para o raio do avatar e o preenchimento da coluna, para que você possa definir a largura do SizedBox da seguinte maneira e evitar valores de codificação fixa:

    Row(
      children: [
        Icon(Icons.directions_walk),
        SizedBox(width: 8),
        // Expanded will use all the remaining space in the row
        Expanded(child: Text("Walk Walk Walk")),
        SizedBox(width: 2 * avatarRadius - padding),
      ],
    );
    

    Espero que isso ajude!

    • 3

relate perguntas

  • como expandir o filho do listview para que todos os filhos ocupem a largura máxima em vibração

  • Como corrigir GoRouter.of(context).pop() para navegar para a página anterior?

  • o estado não muda ao usar o sliver appbar em flutter

  • Como solicitar que o usuário acesse o armazenamento do telefone?

  • Como garantir que o código seja executado na ordem correta? vibrar

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    Reformatar números, inserindo separadores em posições fixas

    • 6 respostas
  • Marko Smith

    Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

    • 2 respostas
  • Marko Smith

    Problema com extensão desinstalada automaticamente do VScode (tema Material)

    • 2 respostas
  • Marko Smith

    Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

    • 1 respostas
  • Marko Smith

    Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

    • 1 respostas
  • Marko Smith

    Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

    • 6 respostas
  • Marko Smith

    `(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

    • 3 respostas
  • Marko Smith

    Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

    • 1 respostas
  • Marko Smith

    PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

    • 2 respostas
  • Marko Smith

    AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

    • 1 respostas
  • Martin Hope
    Fantastic Mr Fox Somente o tipo copiável não é aceito na implementação std::vector do MSVC 2025-04-23 06:40:49 +0800 CST
  • Martin Hope
    Howard Hinnant Encontre o próximo dia da semana usando o cronógrafo 2025-04-21 08:30:25 +0800 CST
  • Martin Hope
    Fedor O inicializador de membro do construtor pode incluir a inicialização de outro membro? 2025-04-15 01:01:44 +0800 CST
  • Martin Hope
    Petr Filipský Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não? 2025-03-23 21:39:40 +0800 CST
  • Martin Hope
    Catskul O C++20 mudou para permitir a conversão de `type(&)[N]` de matriz de limites conhecidos para `type(&)[]` de matriz de limites desconhecidos? 2025-03-04 06:57:53 +0800 CST
  • Martin Hope
    Stefan Pochmann Como/por que {2,3,10} e {x,3,10} com x=2 são ordenados de forma diferente? 2025-01-13 23:24:07 +0800 CST
  • Martin Hope
    Chad Feller O ponto e vírgula agora é opcional em condicionais bash com [[ .. ]] na versão 5.2? 2024-10-21 05:50:33 +0800 CST
  • Martin Hope
    Wrench Por que um traço duplo (--) faz com que esta cláusula MariaDB seja avaliada como verdadeira? 2024-05-05 13:37:20 +0800 CST
  • Martin Hope
    Waket Zheng Por que `dict(id=1, **{'id': 2})` às vezes gera `KeyError: 'id'` em vez de um TypeError? 2024-05-04 14:19:19 +0800 CST
  • Martin Hope
    user924 AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos 2024-03-20 03:12:31 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve