Início / coding / Perguntas / 79553483
Accepted
Andy
Asked: 2025-04-04 00:15:55 +0800 CST

Como espaçar esses recipientes uniformemente?

  • 772

Estou tentando criar um widget de cartão no Flutter que tem quatro linhas de conteúdo:

  • Linha com um único widget de texto, alinhado à esquerda Linha com quatro contêineres quadrados, espaçados uniformemente Linha com dois contêineres retangulares, espaçados uniformemente e alinhados com quadrados Linha com um único ícone, alinhado à direita

Estou perto, mas não consigo fazer o alinhamento dos quadrados/retângulos direito. Eu tentei MainAxisAlignment.spaceAround, MainAxisAlignment.spaceBetweene MainAxisAlignment.spaceEvenlynenhum deles está certo.

Captura de tela dos resultados atuais

A fileira de quadrados está próxima, mas não consigo descobrir como alinhar os dois retângulos abaixo dela (ou seja, cada retângulo deve ter a largura de dois quadrados + o espaço que os separa).

Estou usando a combinação errada de MainAxisAlignment.whatever? Preciso usar algo mais complexo, como MediaQuery.of(context)size.width+ algumas fórmulas funky?

flutter

1 respostas

  1. Best Answer

    Você pode usar widgets expandidos para os espaçadores e cartões e ajustar os valores flex. Observe que há um total que é o mesmo em ambas as linhas ( 9). Na linha, os cartões abrangem apenas mais conteúdo. Você pode ajustar os valores flex como quiser, apenas certifique-se de que o total seja igual e que cada conteúdo da linha 2 tenha a quantidade de dois elementos da linha 1 e um espaçador da linha 1.

    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 30,
          children: [
            Row(
              children: const [
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 1,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 1,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 1,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 1,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
              ],
            ),
            Row(
              children: const [
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 3,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
                Expanded(
                  flex: 3,
                  child: GreyBox(),
                ),
                Expanded(flex: 1, child: SizedBox()),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class GreyBox extends StatelessWidget {
  const GreyBox({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      color: Colors.grey,
    );
  }
}
    • 2

relate perguntas