Flutter는 두 항목을 극단에 정렬합니다. 하나는 왼쪽에, 다른 하나는 오른쪽에 있습니다.


104

두 항목을 왼쪽과 오른쪽에 하나씩 정렬하려고합니다. 왼쪽에 정렬 된 행이 하나 있고 해당 행의 자식이 오른쪽에 정렬됩니다. 그러나 자식 행이 부모에서 정렬 속성을 선택하는 것 같습니다. 이것은 내 코드입니다

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,
            ],
        );

결과적으로 나는 이와 같은 것을 얻습니다

Left Right

내가 원하는 것은

Left      Right

또한 행에 충분한 공간이 있습니다. 내 질문은 왜 자식 Row가 그 MainAxisAlignment.end속성을 보여 주지 않습니까?

답변:


212

Row대신 단일을 사용하십시오 mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

또는 사용할 수 있습니다 Expanded

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

2
두 번째 예에서 나는 그의 settingsRow, 다음을 포함합니다Text("right")
Rémi Rousselet

내가 참조. 그 부분을
놓쳤습니다

감사. 하지만 호기심 때문에 내 코드가 작동하지 않는 이유는 무엇입니까? mainAxisAlignment아이의가 발생하지 않습니다. 부모의 재산이 아이들의 재산을 추월합니까?
MistyD

1
두 번째 것이 훨씬 좋습니다.
Raghu Mudem

1
@KPradeepKumarReddy 크기가 너무 크면이 두 위젯이 서로 겹칠 수 있다는 것을 두려워하지 않는다면 Stack을 사용하고 Align 위젯에 래핑 된 두 자식을 사용하는 것이 좋습니다 (하나는 Alignment.center, 다른 하나는 Alignment.centerRight). 또는 flex를 사용하여 행에 세 개의 확장 된 위젯이 있습니다. 1. 첫 번째는 공백 (SizedBox), 두 번째는 중앙 위젯 (중앙으로 래핑 됨), 세 번째는 오른쪽 정렬 위젯을 포함합니다.
Alex Semeniuk

76

간단한 해결책은 Spacer()두 위젯간에 사용하는 것입니다.

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

Spacer ()는 무엇을합니까? 연속으로 하나의 위젯은 중앙에, 다른 하나는 맨 오른쪽에두고 싶습니다. spacer () 사용이 가능합니까?
K Pradeep Kumar Reddy

53

여러 가지 방법으로 할 수 있습니다.

사용 mainAxisAlignment: MainAxisAlignment.spaceBetween

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

사용 Spacer

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

사용 Expanded

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

사용 Flexible

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

출력 :

여기에 이미지 설명 입력


하나는 중앙에, 다른 하나는 맨 오른쪽에두고 싶습니다. 우리는 어떻게 그것을 달성 할 수 있습니까?
K Pradeep Kumar Reddy

@KPradeepKumarReddy 좋은 접근 방식은이 경우 Stack에 사용 하는 것입니다.
CopsOnRoad

@KPradeepKumarReddy 나는 이미 이와 같은 질문이 있어야한다고 확신합니다. 당신이해야 할 일은 올바른 키워드로 검색하는 것입니다. 주석에서 코드를 실제로 보여줄 수는 없지만 Stack첫 번째 자식은 Align(오른쪽)이고 두 번째는 Center또는 단순 할 수 있는를 사용하는 것 Align입니다.
CopsOnRoad

1

CopsOnRoad맞습니다. 스택을 통해 하나는 오른쪽에, 다른 하나는 중앙에 정렬 할 수 있습니다.

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.