颤振柱不在垂直中心

Question

我需要使列垂直居中，我尝试使用mainAxisAlignment和crossAxisAlignment，但不知道为什么它不在居中。这是我的代码

return Container(
      height: stackHeight * 0.4,
      decoration: BoxDecoration(
          color: Color(0xff404040),
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(

            padding: EdgeInsets.only(top: 10, left: 10, right:10,
              bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                 textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Would Question',
                      labelStyle: TextStyle(
                          color: Colors.blue
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                  ),
                  onSubmitted: (_) => _submitData(),
                ),
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Rather Question',
                      labelStyle: TextStyle(
                          color: Colors.red
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  onSubmitted: (_) => _submitData(),
                ),

                RaisedButton(onPressed: () {
                  _submitData();

                }, child: Text('Add Question', style: TextStyle(
                    color: Colors.white
                ),),color: Theme.of(context).primaryColor,
                ),

              ],
            ),
          ),
          ],
        ),
      ),
    );

另外，在边框半径上不知道它在图像模拟器中显示的白色角，我也需要删除该白色。

此外，当我打开键盘的盖子时，整个底片都没有显示任何东西，并且黄线错误显示，当键盘打开底部的支撑杆向上移动时可能出现

Answer 1

您可以提供透明的背景，这样它将消除白色的角。 The trains today are: Train to Tel-Aviv departs at 11:35. Train is not full. Train to Jerusalem departs at 10:50. Train is full. Train to Tel-Aviv departs at 07:15. Train is full. 也可以使用Singlescroll小部件包装中心。如上述答案中所述。

Answer 2

使用此

crossAxisAlignment: CrossAxisAlignment.center,

代替此

crossAxisAlignment: CrossAxisAlignment.end,

示例代码

return Container(
      height: stackHeight * 0.4,
      decoration: BoxDecoration(
          color: Color(0xff404040),
          borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
      ),
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(

            padding: EdgeInsets.only(top: 10, left: 10, right:10,
              bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                 textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Would Question',
                      labelStyle: TextStyle(
                          color: Colors.blue
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.blue),
                    ),
                  ),
                  onSubmitted: (_) => _submitData(),
                ),
                TextField(
                  maxLength: 56,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    counterText: '',
                      labelText: 'Rather Question',
                      labelStyle: TextStyle(
                          color: Colors.red
                      ),
                    enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.red),
                    ),
                  ),
                  keyboardType: TextInputType.number,
                  onSubmitted: (_) => _submitData(),
                ),

                RaisedButton(onPressed: () {
                  _submitData();

                }, child: Text('Add Question', style: TextStyle(
                    color: Colors.white
                ),),color: Theme.of(context).primaryColor,
                ),

              ],
            ),
          ),
          ],
        ),
      ),
    );

Answer 3

用SingleChildScrollView小部件包装Center小部件。对于白色角落，您可以将主容器与其他container包裹在一起并设置color: new Color.fromRGBO(255, 0, 0, 0.5),

此处工作代码

   return Container(
      color: new Color.fromRGBO(255, 0, 0, 0.5),
      child: Container(
        height: stackHeight * 0.4,
        decoration: BoxDecoration(
            color: Color(0xff404040),
            borderRadius: BorderRadius.only(topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0))
        ),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(

                  padding: EdgeInsets.only(top: 10, left: 10, right:10,
                    bottom: MediaQuery.of(context).viewInsets.bottom + 10 ,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      TextField(
                        maxLength: 56,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                        decoration: InputDecoration(
                          counterText: '',
                          labelText: 'Would Question',
                          labelStyle: TextStyle(
                              color: Colors.blue
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.blue),
                          ),
                        ),
                        onSubmitted: (_) => _submitData(),
                      ),
                      TextField(
                        maxLength: 56,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        textAlign: TextAlign.center,
                        decoration: InputDecoration(
                          counterText: '',
                          labelText: 'Rather Question',
                          labelStyle: TextStyle(
                              color: Colors.red
                          ),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.red),
                          ),
                        ),
                        keyboardType: TextInputType.number,
                        onSubmitted: (_) => _submitData(),
                      ),

                      RaisedButton(onPressed: () {
                        _submitData();

                      }, child: Text('Add Question', style: TextStyle(
                          color: Colors.white
                      ),),color: Theme.of(context).primaryColor,
                      ),

                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );