Flutter:如何防止键盘覆盖CustomScrollView/SliverToBoxAdapter中的内容?

bihw5rsg  于 2023-04-13  发布在  Flutter
关注(0)|答案(1)|浏览(212)

在Flutter中,我有一个CustomScrollView,一个SliverAppBar和一个SliverToBoxAdapter,其中包含几个小部件,包括一些TextFormField和一个ElevatedButton
如何防止键盘覆盖SliverToBoxAdapter的内容?基本上,我希望滚动位置在默认情况下始终处于最大范围。

预期行为:

当前行为:

验证码:

class MyHomePage extends HookWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            pinned: true,
            expandedHeight: 400,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'Lorem ipsum',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
              background: Image(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://images.pexels.com/photos/16288133/pexels-photo-16288133.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
                ),
              ),
            )
          ),
          SliverToBoxAdapter(
            child: Column(
              children: [
                const Text('My form'),
                TextFormField(
                  decoration: const InputDecoration(
                    prefixIcon: Icon(Icons.email_outlined),
                    labelText: 'Form field',
                    border: OutlineInputBorder(),
                  ),
                ),
                Container(
                  // Space to enforce scrolling
                  height: 300,
                  width: 100,
                  color: Colors.red,
                ),
                ElevatedButton(
                   onPressed: () {},
                   child: const Text('Submit'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
7kqas0il

7kqas0il1#

你必须禁用脚手架调整键盘上出现。
在脚手架中添加resizeToAvoidBottomInset: false,
示例:

Scaffold(
    resizeToAvoidBottomInset: false,
    body: ...
),

相关问题