flutter widget-Sapcer()

sapcer()，这个组件太好用了，哈哈哈
先上图
键盘消失时候，按钮的位置

键盘消失

键盘弹出时候，按钮的位置

键盘弹出
底部紫色按钮随着键盘升起降落而自适应的改变其位置
整个布局用column，考虑到点击空白键盘消失，所以整个view最外层是一个KeyboardDismissOnTap

class MineView extends GetView<MineController> {
  @override
  Widget build(BuildContext context) {
    final textFieldController = TextEditingController();
    return KeyboardDismissOnTap(
        child: Scaffold(
      appBar: AppBar(
          leading: GestureDetector(
            onTap: () {
              Get.changeTheme(Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
            },
            child: Icon(
              Icons.ac_unit_sharp,
              color: Colors.orange,
            ),
          ),
          actions: [
            IconButton(
                onPressed: () {
                  Get.offAllNamed(RoutePage.Login);
                },
                icon: Icon(
                  Icons.exit_to_app,
                  color: Colors.red,
                )),
          ],
          title: Text('mine')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Welcome to our home'),
            SizedBox(
              height: 40,
            ),
            Text('your email'),
            SizedBox(
              height: 4,
            ),
            Text(
              '840301700@qq.com',
            ),
            SizedBox(
              height: 16,
            ),
            TextField(
              controller: textFieldController,
              decoration: InputDecoration(
                hintText: '请输入密码',
              ),
              onChanged: (_) {},
              onSubmitted: (_) {},
            ),
            Text(
              'Exping 和 MOGO 同为 iFREEGROUP 旗下产品，账户体系通用，可直接使用 MOGO 密码登录。',
            ).marginOnly(top: 8),
            Spacer(),
            ElevatedButton(
              onPressed: () {},
              child: Text('Next'),
              style: ElevatedButton.styleFrom(
                primary: Colors.purple,
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
              ),
            ).paddingSymmetric(horizontal: 16),
            KeyboardVisibilityProvider(
                child: SafeArea(
              top: false,
              child: SizedBox(
                height: 0,
              ),
            )),
          ],
        ),
      ),
    ));
  }

其实Spacer 就是包装好的 Expanded,有人称之为弹簧组件，专门用来填充空白位置的。
官网解释：Spacer创建一个可调整的空间隔，可用于调整Flex容器（如行或列）中窗口小部件之间的间距。

class Spacer extends StatelessWidget {
  /// Creates a flexible space to insert into a [Flexible] widget.
  ///
  /// The [flex] parameter may not be null or less than one.
  const Spacer({Key key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);
 
  /// 用于确定占用多少空间的弹性系数。
  /// 在放置不灵活的子对象后，根据子对象的弹性系数，将自由空间按比例分割，
  /// 从而确定[间隔对象]在主轴中可以占用的空间量。默认为1。
  final int flex;
 
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

可以看到，它其实就是包装了一个 Expanded 的 SizedBox 。

KeyboardVisibilityProvider这块主要是按钮和键盘之间的安全距离