본문 바로가기
Flutter/Flutter FAQ

Flutter 플러터에서 열과 행 항목을 가운데 정렬하는 방법은 무엇인가요?, How to center column and row item in Flutter?

by 베타코드 2023. 9. 24.
반응형

질문


나는 작은 통화 표를 가지고 있습니다. 그리드를 사용하지 않았습니다. 열과 행을 사용했습니다. 문제는 행에 있는 항목들이 아래의 엑셀 예시처럼 가운데에 표시되지 않습니다. 항목들을 가운데에 표시하기 위해 어떤 위젯을 사용해야 할까요?

이미지 설명 입력

예시 코드:

return new Center(
  child: new Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Icon(
              Icons.crop_rotate,
              color: Colors.white,
            ),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("STG", style: mainHeadTextStyle),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("EUR", style: mainHeadTextStyle),
          ),
          new Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
            child: new Text("USD", style: mainHeadTextStyle),
          ),
        ],
      ),
      new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
....
....
....

답변


전체 테이블을 가운데로 정렬하려면 mainAxisAlignment 속성을 Column에 사용하세요.

Column

mainAxisAlignment: MainAxisAlignment.center //열의 내용을 수직으로 가운데로 정렬,
crossAxisAlignment: CrossAxisAlignment.center //열의 내용을 수평으로 가운데로 정렬,

Row

mainAxisAlignment: MainAxisAlignment.center //행의 내용을 수평으로 가운데로 정렬,
crossAxisAlignment: CrossAxisAlignment.center //행의 내용을 수직으로 가운데로 정렬,
반응형

댓글