在 Flutter 中使用键盘时防止背景滚动

Question

我希望背景滚动以聚焦文本字段，但让背景图像保持其位置/纵横比。

我尝试过的：

• 用一个包含背景图片的 BoxDecoration 将我的 Scaffold 包装在一个容器中
• 用堆栈包裹我的脚手架，其中包括作为背景的图像
• 在我的 Scaffold 中禁用了 resizeToAvoidBottomInset

使用列出的第一个和第三个选项：

class LoginPage extends BasePage {
  LoginPage({Key? key}) : super(key, configTypes: [ConfigurationType.login]);
  
  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends BaseState<LoginPage> with BasicPage {
  @override
  Widget body() {
    return Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: ExactAssetImage(Assets.bgLogin), // Assets is constant to filepath
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent, // To see background image
        body: SafeArea(
          child: ... // Contains textfield/other UI elements
        ),
      ),
    );
  }
}

下面是背景滚动的演示：

Answer 1

我认为您应该将装有容器的 Scaffold 退回。 您正在阻止图像在 Scaffold 上滚动，但不能阻止父 Countainer 的滚动。

class _LoginPageState extends BaseState<LoginPage> with BasicPage {
  @override
  Widget body() {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent, // To see background image
        body: SafeArea(
          child: Container(
        decoration: const BoxDecoration(
        image: DecorationImage(
          image: ExactAssetImage(Assets.bgLogin), // Assets is constant to filepath
          fit: BoxFit.cover,
        ),
      ),
      child: ... // Contains textfield/other UI elements
        ),
      ),
    );
  }