Flutter/Flutter FAQ

Flutter 플러터에서 위젯을 자동으로 새 줄로 감싸기, Autowrap widgets to new line in flutter

독학코딩 2024. 1. 3. 08:44
반응형

질문


나는 크기가 다른 5 개의 위젯을 가지고 있으며, 이들을 옆에 놓으면 오버플로우될 것입니다.

나는 위젯을 가로 공간으로 제한하고 위젯을 자동으로 새로운 줄로 바꾸는 레이아웃 도우미 클래스를 찾고 있습니다. 처음에는 그리드 뷰를 찾고 있었지만, 모든 요소가 다른 너비를 가지고 있기 때문에 독립적인 뷰를 선호합니다. 실제로 다중 행 텍스트 필드는 이미 그렇게 동작하지만, 위젯에 대해서도 동일한 접근 방식이 필요합니다. 어떤 아이디어가 있을까요?

<Widget>[
    new RaisedButton(child: const Text('Foo')),
    new RaisedButton(child: const Text('Foo Bar')),
    new RaisedButton(child: const Text('Foo Bar Bas')),
    new RaisedButton(child: const Text('F')),
    new RaisedButton(child: const Text('B'))
]

답변


Wrap 위젯이 필요합니다:

return Wrap(
      children: <Widget>[
        new RaisedButton(child: const Text('Foo')),
        new RaisedButton(child: const Text('Foo Bar')),
        new RaisedButton(child: const Text('Foo Bar Bas')),
        new RaisedButton(child: const Text('F')),
        new RaisedButton(child: const Text('B'))
      ],
    );

또한, Wrap 위젯에 runSpacingspacing 속성을 추가하여 항목들 사이에 더 많은 공간을 줄 수 있습니다.

Wrap(
            runSpacing: 5.0,
            spacing: 5.0,

enter image description here

반응형