Flutter保持视图可见插件keep_visible的使用

在键盘弹出时保持小部件始终可见。
在以下示例中，页脚始终可见：

使用方法

导入插件

首先，需要导入 keep_visible 插件：

import 'package:keep_visible/keep_visible.dart';

包裹目标小部件

将需要保持可见的小部件包裹在 KeepVisible 小部件中：

KeepVisible(
  child: Text('Login Button'),
),

完整示例

以下是一个完整的示例代码，展示了如何使用 keep_visible 插件来确保页面底部的页脚始终可见，即使键盘弹出时也是如此。

示例代码

import 'package:flutter/material.dart';
import 'package:keep_visible/keep_visible.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          // 页面头部
          SliverToBoxAdapter(
            child: Container(
              height: 400,
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('HEADER'),
            ),
          ),
          // 页面主体部分
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                // 输入框区域
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextFormField(
                        decoration: const InputDecoration(
                          labelText: 'email',
                        ),
                      ),
                      TextFormField(
                        decoration: const InputDecoration(
                          labelText: 'password',
                        ),
                      ),
                    ],
                  ),
                ),
                // 始终可见的页脚
                KeepVisible(
                  child: Container(
                    height: 100,
                    margin: const EdgeInsets.only(top: 24),
                    color: Colors.blue,
                    alignment: Alignment.center,
                    child: const Text('FOOTER'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}