Flutter 在堆栈中居中一行
我有一个小部件,它由一行和一个堆栈中的图标组成。我想让它们在堆栈中垂直居中(中间的行,右中心的图标)。我将两个小部件包装在一个Flutter 在堆栈中居中一行,flutter,flutter-layout,Flutter,Flutter Layout,我有一个小部件,它由一行和一个堆栈中的图标组成。我想让它们在堆栈中垂直居中(中间的行,右中心的图标)。我将两个小部件包装在一个Align小部件中,但这只会影响图标,而不会影响行。如何使行垂直居中 这是我的密码 @override Widget build(BuildContext context) { return Card( child: Padding( padding: EdgeInsets.all(16.0), child: Stack(
Align
小部件中,但这只会影响图标,而不会影响行。如何使行垂直居中
这是我的密码
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(searchLanguage == SearchLanguage.english ? word.english : word.korean,
style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text(searchLanguage == SearchLanguage.english ? word.korean : word.english,
style: Theme.of(context).textTheme.bodyText1),
],
),
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () => deleteCallback(word),
),
)
],
),
),
);
}
@覆盖
小部件构建(构建上下文){
回程卡(
孩子:填充(
填充:所有边缘设置(16.0),
子:堆栈(
儿童:[
对齐(
对齐:对齐.center,
孩子:排(
crossAxisAlignment:crossAxisAlignment.center,
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
Text(searchLanguage==searchLanguage.english?word.english:word.korean,
样式:Theme.of(context.textTheme.bodyText1),
大小盒子(
宽度:8.0,
),
图标(图标。向前箭头),
大小盒子(
宽度:8.0,
),
Text(searchLanguage==searchLanguage.english?word.korean:word.english,
样式:Theme.of(context.textTheme.bodyText1),
],
),
),
对齐(
对齐:alignment.centerRight,
孩子:我的钮扣(
图标:图标(Icons.delete),
按下时:()=>deleteCallback(word),
),
)
],
),
),
);
}
这就是结果
尝试使用堆栈对齐:
Stack(
alignment: Alignment.topCenter,
路线特性起作用,同时删除不必要的路线
完整代码:
return Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("One", style: Theme.of(context).textTheme.bodyText1),
SizedBox(
width: 8.0,
),
Icon(Icons.arrow_forward),
SizedBox(
width: 8.0,
),
Text("Two", style: Theme.of(context).textTheme.bodyText1),
],
),
Align(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(Icons.delete),
onPressed: () {},
),
)
],
),
),
)
退货卡(
孩子:填充(
填充:所有边缘设置(16.0),
子:堆栈(
对齐:对齐.center,
儿童:[
划船(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
文本(“一”,样式:Theme.of(context.textTheme.bodyText1),
大小盒子(
宽度:8.0,
),
图标(图标。向前箭头),
大小盒子(
宽度:8.0,
),
文本(“两个”,样式:Theme.of(context.textTheme.bodyText1),
],
),
对齐(
对齐:alignment.centerRight,
孩子:我的钮扣(
图标:图标(Icons.delete),
按下:(){},
),
)
],
),
),
)
谢谢。这是我已经尝试过的,没有任何区别,行在堆栈中仍然是顶部对齐的。我明白了,所以诀窍是将对齐添加到堆栈本身,而不是使用对齐小部件,谢谢。