Flutter에서 세로로 기둥을 중앙에 배치하는 방법은 무엇입니까? 나는 위젯 “new Center”를 사용했습니다. “새 센터”위젯을 사용했는데 세로로 열 중앙에 있지 않습니까? 어떤 아이디어라도 도움이 될 것입니다 ….
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Thank you"),
),
body: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(25.0),
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
height: 175.0,
width: 175.0,
child: new Image.asset('assets/angry_face.png'),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 6.3,
child: _widget,
);
},
),
),
new Text('We are glad we could serve you...', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black87),),
new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
new Text('We appreciate your feedback ! !', style: new TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w200,
color: Colors.black87),),
],
),
),
);
}
답변
Aziz가 제안한 솔루션은 다음과 같습니다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children:children,
)
패딩으로 인해 정확한 중앙에 있지 않습니다.
padding: new EdgeInsets.all(25.0),
정확히 가운데 열을 만들려면 (적어도이 경우에는) 패딩을 제거해야합니다.
답변
시험:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children:children...)
답변
Column으로 다음을 사용하십시오.
mainAxisAlignment: MainAxisAlignment.center
자식 (들)을 부모 공간의 중앙에 수직으로 정렬합니다.
답변
이걸로 해봐. 수직 및 수평 중앙에 위치합니다.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
)
답변
mainAxisAlignment 및 crossAxisAlignment 속성을 사용하여 행 또는 열이 자식을 정렬하는 방법을 제어합니다. 행의 경우 주축은 수평으로 이어지고 교차 축은 수직으로 이어집니다. 기둥의 경우 주축은 수직으로 이어지고 교차 축은 수평으로 이어집니다.
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
답변
또 다른 해결책!
위젯을 가운데 세로 형태로 설정하려면 ListView를 사용할 수 있습니다. 예를 들어 : 세 개의 버튼을 사용하고 ListView 안에 추가 한 다음
shrinkWrap : true->이 ListView를 사용하면 필요한 공간 만 차지합니다.
import 'package:flutter/material.dart';
class List extends StatelessWidget {
@override
Widget build(BuildContext context) {
final button1 =
new RaisedButton(child: new Text("Button1"), onPressed: () {});
final button2 =
new RaisedButton(child: new Text("Button2"), onPressed: () {});
final button3 =
new RaisedButton(child: new Text("Button3"), onPressed: () {});
final body = new Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[button1, button2, button3],
),
);
return new Scaffold(
appBar: new AppBar(
title: Text("Sample"),
),
body: body);
}
}
void main() {
runApp(new MaterialApp(
home: List(),
));
}
산출:
답변
나에게 문제는 내가 제거해야했던 열 내부에 확장이 있었고 작동했다는 것입니다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded( // remove this
flex: 2,
child: Text("content here"),
),
],
)
