Question

我试图在Flutter上的小部件中添加文本字段，并且它可以正确显示，但是当按下文本输入数据时，出现以下错误：

“底部溢出182个像素”

错误是出现默认键盘时。我不知道为什么会这样，因为我将所有内容包装在SingleChildScrollView小部件中，因此应该可以正常工作。

附加代码：

class TextFieldsState extends State<TextFields> {

  @override
  Widget build(BuildContext context) {
    const colorRed = Color(0xFFF0786E);
    return SingleChildScrollView(
      child: Container(
        margin: EdgeInsets.symmetric(
          horizontal: 20.0,
          vertical: 20.0,
        ),
        //color: Colors.greenAccent,
        height: 500,
        child: Stack(
          //alignment: Alignment.bottomCenter,
          children: <Widget>[
            Container (
              height: 500,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(22.0),
                color: colorRed,
              ),
              child: Container (
                height: 500,
                margin: EdgeInsets.only(right: 10,),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(22),
                ),
              ),
            ),
            Center(
              child: Positioned (
                child: SizedBox(
                  height: 136,
                  //width: size.width,
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: 30,
                        width: 160,
                        child: TextField(
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.blue,
                              ),
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            hintText: 'Name',
                          ),
                          textAlign: TextAlign.center,

                        ),
                      ),
                      SizedBox(height: 20.0),
                      Container(
                        height: 30,
                        width: 160,
                        child: TextField(
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.blue,
                              ),
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            hintText: 'Surname',
                          ),
                          textAlign: TextAlign.center,

                        ),
                      ),
                      SizedBox(height: 20.0),

                      Container(
                        height: 30,
                        width: 160,
                        child: TextField(
                          decoration: InputDecoration(
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Colors.blue,
                              ),
                              borderRadius: BorderRadius.circular(10.0),
                            ),
                            hintText: 'Nationality',
                          ),
                          textAlign: TextAlign.center,

                        ),
                      ),

                    ],
                  ),
                ),
              ),
            ),

          ],

        ),
      ),
    );
  }
}

请问如何解决？

Answer 1

请尝试

SingleChildScrollView(
   column(  // your column
   )
)

列中出现溢出错误，您应添加SingleChildScrollView作为此列的父级。

Answer 2

请检查下面的代码。

class TextFieldsState extends State<TextFields> {

    @override
      Widget build(BuildContext context) {
      const colorRed = Color(0xFFF0786E);
      return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.symmetric(
            horizontal: 20.0,
            vertical: 20.0,
          ),
          //color: Colors.greenAccent,
          height: 500,
          child: Stack(
            //alignment: Alignment.bottomCenter,
            children: <Widget>[
              Container(
                height: 500,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22.0),
                  color: colorRed,
                ),
                child: Container(
                  height: 500,
                  margin: EdgeInsets.only(
                    right: 10,
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(22),
                  ),
                ),
              ),
              Center(
                child: SizedBox(
                  height: 136,
                  //width: size.width,
                  child: SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        Container(
                          height: 30,
                          width: 160,
                          child: TextField(
                            decoration: InputDecoration(
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: Colors.blue,
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              hintText: 'Name',
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        SizedBox(height: 20.0),
                        Container(
                          height: 30,
                          width: 160,
                          child: TextField(
                            decoration: InputDecoration(
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: Colors.blue,
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              hintText: 'Surname',
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        SizedBox(height: 20.0),
                        Container(
                          height: 30,
                          width: 160,
                          child: TextField(
                            decoration: InputDecoration(
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: Colors.blue,
                                ),
                                borderRadius: BorderRadius.circular(10.0),
                              ),
                              hintText: 'Nationality',
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 3

最后，我用Expanded小部件包装了所有内容，并在Text字段的列中使用了SingleChilsScrollView对其进行了包装，

底部溢出182像素

3 个答案: