Question

当我在屏幕上选择文本框时，布局中断。如何使屏幕可在堆栈中滚动

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

代码：Gist

Answer 1

您在错误的地方使用了堆栈。您需要在上部（scanPortion）小部件中使用堆栈。 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,
);

稍后请小心删除较旧的Stack，因为它没有任何用处。

键盘弹出时布局中断

1 个答案: