Question

我想将（+，-）图标和TextField对准相同的Vertical位置。但是我不明白这一点。这是我的代码。

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
             InkWell(
                  child: Icon(Icons.remove ,color: Colors.white),
                  onTap: (){},
                     ),
                     Container(
                               width: 35,
                               height: 40,
                               child: TextField(
                                      inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
                                      keyboardType: TextInputType.number,
                                      textAlign: TextAlign.center,
                                      cursorColor: Colors.green,
                                      controller: Controler_size[index],
                                               ),
                              ),
                                      InkWell(
                                              child: Icon(Icons.add,color: Colors.white),
                                              onTap: (){},
                                             )
                      ],
)

请帮助我将这些Widgets垂直放置，以便它们在同一垂直位置对齐。https://i.stack.imgur.com/olFjx.png

Answer 1

如果要放置元素vertically，请使用Column小部件。如果要放置元素horizontally，请使用Row小部件。

检查以下代码：效果很好：

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
             InkWell(
                  child: Icon(Icons.remove ,color: Colors.white),
                  onTap: (){},
                     ),
                     Container(
                               width: 35,
                               height: 40,
                               child: TextField(
                                      inputFormatters:[WhitelistingTextInputFormatter(RegExp(digit_Reg_Expression))],
                                      keyboardType: TextInputType.number,
                                      textAlign: TextAlign.center,
                                      cursorColor: Colors.green,
                                      controller: Controler_size[index],
                                               ),
                              ),
                                      InkWell(
                                              child: Icon(Icons.add,color: Colors.white),
                                              onTap: (){},
                                             )
                      ],
)

我希望这会有所帮助。

Answer 2

将mainAxisAlignment设置为MainAxisAlignment.center

Answer 3

我点击了您在问题中附加的链接，我认为问题出在包装TextField的容器上：

Container(...
   width: 35,
  ---> remove this: (height: 40) ...
)

Flutter小部件对齐

3 个答案: