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

Program / 글쓴이

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

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속성을 보여 주지 않습니까?

답변

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

답변

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

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

답변

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

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

출력 :

여기에 이미지 설명 입력

답변

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

Stack(
    children: [
      Align(
        alignment: Alignment.centerRight,
        child: Text("right"),
      ),
      Align(
        alignment: Alignment.center,
        child: Text("center"),
      )
    ],
  )

답변