Come SpaceEvenly e Ridimensionare due elementi in una Riga?

0

Domanda

Sto cercando di spaceevenly un Icon() e un AutoSizeText() in un Row(). Quando la quantità è lungo come si può vedere nelle immagini allegate rende come previsto, ma quando l'importo è pari a zero o molto corto, il AutoSizeText() è essere centrati, ma in questo modo, con la stessa distanza dai bordi non è più mantenuto. C'è una distanza supplementare causato dalla centratura. Non so come risolvere questo problema.

Edit. Se non fosse chiaro, mi riferisco alla rosa shopping bag icona e la quantità mostrato nel "Riepilogo Settimanale" sezione. Se si guarda al Ristorante Icona e il suo importo, si può notare come essi non sono centrate, sono più vicino al bordo sinistro.

orginal view

enter image description here

Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20),
      ),
      width: size.width * 0.3,
      height: size.height,
      // height: size.height * 0.055,
      child: Row(
        children: [
          Spacer(),
          Expanded(
            flex: 3,
            child: Container(
              child: LayoutBuilder(
                builder: (context, constraint) {
                  return Icon(
                    icona,
                    color: colore,
                    size: constraint.biggest.width * 1,
                  );
                },
              ),
            ),
          ),
          Spacer(),
          Expanded(
            flex: 6,
            child: Center(
              child: AutoSizeText(
                importo,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: colore,
                ),
                maxLines: 1,
              ),
            ),
          ),
          Spacer(),
        ],
      ),
    )
android dart flutter flutter-layout
2021-11-23 20:16:17
1

Migliore risposta

1

Se ho capito bene, si desidera allineare il testo a destra, non di centro.

A tal fine, considerare l'utilizzo di un singolo Spacer() tra l'icona e il testo. L'esterno spaziatura (margin e padding) può essere fatto utilizzando Padding widget, invece.

2021-11-24 00:29:45

In un primo momento, volevo avere un comportamento simile a quello spazio in modo uniforme proprietà della Riga, ho voluto lo stesso spazio tra il bordo sinistro: icona, icona, testo, testo a bordo destro. Non so come ottenere che, però, perché il testo modificare le dimensioni non appena si ridimensiona, in modo che il distanziale deve essere in grado di ridimensionare di conseguenza. Ho deciso che era meglio allineare a destra il testo come hai suggerito, anche se non è quello che volevo, ma sembra decente
iocomxda

@iocomxda, oh, se si voleva avere lo stesso spazio in 3 spazi vuoti, si può provare a mettere 3 Spacer() widget per che. Ma i testi (avendo diversi larghezza) non si allinea con gli altri sulla pagina (come avere $2666 e $0), in modo da allineare a destra è l'approccio più comune.
user1032613

Grazie per la bella spiegazione!!! Non sapevo allineare a destra è stato l'approccio più comune.
iocomxda

In altre lingue

Questa pagina è in altre lingue

Русский
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................