如何解决Flutter Row-均匀对齐3个小部件
我正在尝试在Row()
中均匀对齐3个小部件。
只是它没有按我需要的方式工作。
我已经花了好几个小时了,我真的不知道该如何解决。
我确定我在这里错过了一些东西。
我要添加代码和当前结果的屏幕截图。
更新的代码!
这个问题现在似乎超出了范围
Container(
width: MediaQuery.of(context).size.width,padding: const EdgeInsets.all(16.0),child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.end,children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
Container(
width: rowWidth * 0.2,alignment: Alignment.centerLeft,child: CircleAvatar(
backgroundColor: randomColor,child: Text('JD'),),Container(
width: rowWidth * 0.2,child: Text(
'John Doe',style:
Theme.of(context).textTheme.subtitle1,Container(
width: rowWidth * 0.6,alignment: Alignment.centerRight,child: Text(
'Online',style: Theme.of(context)
.textTheme
.headline6
.copyWith(
color:Theme.of(context).primaryColor,],
解决方法
有几种方法可以做到这一点。我对您的代码做了一些修改,以便您可以看到它。到目前为止,您的方法完全没问题,您只需要为容器设置宽度即可。否则,Flutter不知道如何在行中分隔元素。另外,您可以只计算行的宽度,然后从中获取子级的宽度。
我也建议您将行中的小部件放入容器中,以便于处理(就像我在下面所做的那样)。希望能帮助到你!祝你好运。
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.end,children: <Widget>[
Container(
width: rowWidth,child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[
Container(
color: Colors.grey,child: CircleAvatar(
backgroundColor: Colors.red,child: Text('JD'),),Container(
color: Colors.green,child: Text(
'John Doe',style: Theme.of(context).textTheme.subtitle1,Container(
color: Colors.yellow,child: Text(
'Online',style: Theme.of(context).textTheme.headline6.copyWith(
color: Theme.of(context).primaryColor,],);
}
编辑: 如果您想更自由地放置其他元素,我将为其中包含文本/图标的容器提供固定宽度(根据行宽计算),然后可以使用容器的“ alignment”属性。
在此示例中,我给绿色和灰色容器分别占行的20%,并使它们的内容向左对齐,而黄色容器为60%,并使其内容向右对齐。
Widget _buildTester() {
final fullWidth = MediaQuery.of(context).size.width;
final rowWidth = fullWidth * 0.9; //90%
final containerWidth =
rowWidth / 3; //Could also use this to set the containers individually
return Container(
child: Padding(
padding: const EdgeInsets.all(16.0),children: <Widget>[
Container(
width: rowWidth * 0.2,alignment: Alignment.centerLeft,color: Colors.grey,Container(
width: rowWidth * 0.2,color: Colors.green,Container(
width: rowWidth * 0.6,alignment: Alignment.centerRight,color: Colors.yellow,);
}
,
简单,这样做吧。
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: <Widget>[
RaisedButton(
onPressed: () {},color: Colors.blue,child: Text('One'),RaisedButton(
onPressed: () {},child: Text('Two'),child: Text('Three'),)
],
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。