반응형
질문
I am trying to create square buttons, but Expanded doesn't seem to work the same as it does with containers. Take the following code for example
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Row(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
이 코드를 예로 들면, 제곱형 버튼을 만들려고 하지만 Expanded는 컨테이너와는 다른 방식으로 작동하지 않는 것 같습니다.
It displays two buttons that are expanded horizontally, but not vertically. At the same time the containers will expand both horizontally and vertically. The same effect occurs if I do the following:
new Expanded(
flex: 2,
child: new Column(
children: <Widget>[
new Expanded(
child:new Column(
children: <Widget>[
new Expanded(child: new MaterialButton(...)),
new Expanded(child: new MaterialButton(....)),
new Expanded(child: new Container(color: Colors.red)),
new Expanded(child: new Container(color: Colors.green)),
]
)
)
],
)
)
....
여기서는 Row를 Column으로 변경했습니다. 버튼은 세로로 확장되지만 가로로는 확장되지 않습니다. 컨테이너는 둘 다 확장됩니다.
Is there a way have my buttons expand to fit their parent both vertically and horizontally?
버튼이 부모에게 세로와 가로로 모두 확장되도록 할 수 있는 방법이 있을까요?
답변
Row
에 crossAxisAlignment
속성을 추가하세요;
crossAxisAlignment: CrossAxisAlignment.stretch
반응형
댓글