flutter - 精确地在行的中心创建一个小部件-Flutter

Question

我想在行的正中间制作“喜欢”和“不喜欢”按钮(绿色的容器)

这是我的代码

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),
        ],
      ),
    ), 

这该怎么做？

Answer 1

您可以使用一个堆栈，第一个作为行，第二个作为与屏幕中心对齐的绿色框。检查此: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示例中减小屏幕尺寸以查看此行为。