将容器置于 flutter 中并使其在键盘可见时可滚动

Question

我有一个屏幕，其中有一个宽度固定但高度不受限制的容器。容器的内容被键盘弹出窗口隐藏。我想让容器在显示键盘弹出窗口时可滚动或处于焦点状态。以下是我的代码：

Scaffold(
      backgroundColor: Colors.green, // Set the background color of the app
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            width: 480,
            padding: EdgeInsets.all(16.0),
            color: Colors.white, // Set the background color of the container
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextField(
                  decoration: InputDecoration(labelText: 'Field 1'),
                ),
                SizedBox(height: 16.0), // Add spacing between fields
                TextField(
                  decoration: InputDecoration(labelText: 'Field 2'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 3'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 4'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Field 5'),
                ),
              ],
            ),
          ),
        ),
      ),
    );

仅当手机处于横向视图并且我单击弹出键盘的文本字段时才会发生这种情况。我尝试了 chatgtp 和 Gemini，但它们都给出了相同的答案，但不起作用。请帮忙。目前看起来像这样

当前问题

Answer 1

将您的

Center

小部件放入

Column

中。通常，我一起使用

SingleChildScrollView

和

Column

。

Scaffold(
      backgroundColor: Colors.green, // Set the background color of the app
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: SingleChildScrollView(
                child: Container(
                  width: 480,
                  padding: const EdgeInsets.all(16.0),
                  color: Colors.white, // Set the background color of the container
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextField(
                        decoration: InputDecoration(labelText: 'Field 1'),
                      ),
                      SizedBox(height: 16.0), // Add spacing between fields
                      TextField(
                        decoration: InputDecoration(labelText: 'Field 2'),
                      ),
                      SizedBox(height: 16.0),
                      TextField(
                        decoration: InputDecoration(labelText: 'Field 3'),
                      ),
                      SizedBox(height: 16.0),
                      TextField(
                        decoration: InputDecoration(labelText: 'Field 4'),
                      ),
                      SizedBox(height: 16.0),
                      TextField(
                        decoration: InputDecoration(labelText: 'Field 5'),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ); }

执行此操作后，请记住将

Center

包裹在

Expanded

中。