键盘弹出时布局中断

Question

当我 select 屏幕上的文本框时布局中断。如何使屏幕可随堆栈滚动

当用户开始在文本框中输入内容时，是否有任何方法可以将整个内容滚动到底部

代码：Gist

Answer 1

您堆栈用错了地方。您需要在 upper(scanPortion) 小部件中使用 Stack。 CircleAvatar 应该与 scanPortion 重叠并且使溢出可见。这样，CircleAvatar 将固定在 scanPortion 上并随之滚动。

从当前位置移除 CircleAvatar 并将 scanPortion 更改为以下内容：

var scanPortion = new Stack(
  children: <Widget>[
    new Container(
      height: MediaQuery.of(context).size.height / 2 - 40,
      width: MediaQuery.of(context).size.width,
      color: new Color(0xFF4A4A4C).withOpacity(0.5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          qrCode,
          SizedBox(
            height: 10.0,
          ),
          new RaisedButton.icon(
            color: Colors.blueAccent,
            textColor: Colors.white,
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0)),
            onPressed: () async {},
            icon: new Icon(
              Icons.camera_alt,
              color: Colors.white,
            ),
            label: Text('Scan'),
          )
        ],
      ),
    ),
    Positioned(
      top: (MediaQuery.of(context).size.height / 2 - 40.0) - 20.0,
      left: (MediaQuery.of(context).size.width) / 2 - 20.0,
      child: Center(
        child: CircleAvatar(
          backgroundColor: Colors.pink,
          child: Text('OR'),
          radius: 20.0,
        ),
      ),
    ),
  ],
  overflow: Overflow.visible,
);

稍后请小心删除旧堆栈，因为它不会有任何用处。

键盘弹出时布局中断

The layout breaks when the keypad pops up

flutter

flutter-layout