Flutter alinhar dois itens nos extremos - um à esquerda e outro à direita


104

Estou tentando alinhar dois itens nos extremos, um à esquerda e outro à direita. Eu tenho uma linha que está alinhada à esquerda e, em seguida, um filho dessa linha está alinhado à direita. No entanto, parece que a linha filha está pegando a propriedade de alinhamento de seu pai. Este é o meu código

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

como resultado eu recebo algo assim

Left Right

O que eu gostaria é

Left      Right

Também há espaço suficiente na linha. Minha pergunta é por que o filho Row não está exibindo sua MainAxisAlignment.endpropriedade?

Respostas:


211

Use um único Row, com mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Ou você pode usar Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);

2
No segundo exemplo, eu uso o dele settingsRow, que contémText("right")
Rémi Rousselet

Eu vejo. Perdeu essa parte
Günter Zöchbauer

Obrigado. Mas, por curiosidade, por que meu código não funciona? O mainAxisAlignmentda criança não ocorre. As propriedades dos pais superam as dos filhos?
MistyD de

1
O segundo é muito melhor.
Raghu Mudem de

1
@KPradeepKumarReddy Se você não tem medo de que esses dois widgets se sobreponham se seus tamanhos forem muito grandes, sugiro usar Stack e dois filhos agrupados em widgets Align (um com Alignment.center, outro com Alignment.centerRight). Ou tenha três widgets expandidos em sua linha com flex: 1. Primeiro conterá em branco (SizedBox), segundo - seu widget centralizado (envolvido no Centro) e o terceiro conterá seu widget alinhado à direita.
Alex Semeniuk

76

Uma solução simples seria usar Spacer()entre os dois widgets

Row(
  children: [
    Text("left"),
    Spacer(),
    Text("right")
  ]
);

O que Spacer () faz? Em uma linha, quero manter um widget no centro e outro na extrema direita. Isso é possível usando espaçador ()?
K Pradeep Kumar Reddy

53

Você pode fazer isso de várias maneiras.

Usando mainAxisAlignment: MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    FlutterLogo(),
    FlutterLogo(),
  ],
);

Usando Spacer

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

Usando Expanded

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(child: SizedBox()),
    FlutterLogo(),
  ],
);

Usando Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

Produto :

insira a descrição da imagem aqui


Quero um widget no centro e outro na extrema direita. Como podemos conseguir isso?
K Pradeep Kumar Reddy

@KPradeepKumarReddy Uma boa abordagem é usar Stacknesse caso.
CopsOnRoad

@KPradeepKumarReddy Tenho certeza que já deve haver alguma pergunta como essa no SO, tudo que você precisa fazer é pesquisar com a palavra-chave certa. Eu realmente não posso mostrar o código aqui no comentário, mas a ideia é usar Stack, com seu primeiro filho sendo Align(à direita) e o segundo poderia ser um Centerou simples Align.
CopsOnRoad

1

Sim, CopsOnRoadestá certo, através da pilha você pode alinhar um à direita e outro no centro.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.