我想在行的正中间制作“喜欢”和“不喜欢”按钮(绿色的容器)
这是我的代码
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.comment),
Container(
width: 150,
color: Colors.greenAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.keyboard_arrow_up),
Stack(
children: <Widget>[
Container(
width: 30,
height: 10,
color: Colors.black,
),
],
),
Icon(Icons.keyboard_arrow_down),
],
),
),
这该怎么做?
最佳答案
您可以使用一个堆栈,第一个作为行,第二个作为与屏幕中心对齐的绿色框。检查此:Dartpad code
Stack(fit: StackFit.expand, children: [
// The icon and text in this row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center, // Align the items to the center vertically
children: [Icon(Icons.message), Text('Current Date')]),
// Draw the green container in the next layer of the stack above the row layer
// Align it to center
Align(
alignment: Alignment.center,
child: Container(
width: 150,
color: Colors.greenAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.keyboard_arrow_up),
Container(
width: 30,
height: 10,
color: Colors.black,
),
Icon(Icons.keyboard_arrow_down),
],
),
),
)
]);
注意:这可确保您的绿色框始终始终位于确切的中心,但是如果屏幕尺寸足够小,则绿色框将遮盖后面的行元素。尝试在dartpad示例中减小屏幕尺寸以查看此行为。
关于flutter - 精确地在行的中心创建一个小部件-Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64296741/