Flutter键盘遮挡避免插件keyboard_avoider的使用

keyboard_avoider是一个轻量级的替代Scaffold的widget，用于避免屏幕上的软件键盘遮挡。它会自动将被遮挡的TextField子部件滚动到可见区域。

Examples 示例

基本的Placeholder

下面的例子展示了如何使用KeyboardAvoider包裹一个Placeholder：

import 'package:keyboard_avoider/keyboard_avoider.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return KeyboardAvoider(
      child: Placeholder(),
    );
  }
}

包含多个TextFields的ListView，启用自动滚动

此示例展示了一个包含40个TextFormField的ListView，并启用了自动滚动功能，以确保当用户点击输入框时，输入框能够自动滚动到可见区域。

import 'package:keyboard_avoider/keyboard_avoider.dart';

class MyWidget extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return KeyboardAvoider(
      autoScroll: true,
      child: ListView.builder(
        controller: _scrollController,
        itemCount: 40,
        itemBuilder: (context, index) {
          return TextFormField(
            initialValue: 'TextFormField ${index + 1}',
          );
        },
      ),
    );
  }
}

为什么不使用Scaffold？

Flutter自带的Scaffold组件可以自动调整其body widget的底部填充来适应屏幕上的键盘。但是，它有两个主要缺点：

1. 它将所有内容向上推，这可能不是你想要的效果。
2. 它假定它占据了整个屏幕，而实际上未必如此。

相比之下，你可以选择性地应用KeyboardAvoider到特定的部件上，并且它只会根据键盘实际遮挡的高度调整底部的padding。

自动滚动 Auto Scroll

为了使聚焦的部件（如TextField）自动滚动到可见区域，可以将autoScroll属性设置为true。如果child不是一个ScrollView，那么它会被自动嵌入到一个SingleChildScrollView中，使其可滚动。

完整示例 Demo

下面是一个完整的示例代码，演示了如何在不同布局中使用KeyboardAvoider，包括表单和占位符。

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

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

class MyApp extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: <Widget>[
          Flexible(
            flex: 1,
            child: Column(
              children: <Widget>[
                Flexible(flex: 2, child: _buildPlaceholder(Colors.red)),
                Flexible(flex: 1, child: _buildPlaceholder(Colors.pink)),
              ],
            ),
          ),
          Flexible(
            flex: 2,
            child: Column(
              children: <Widget>[
                Flexible(flex: 2, child: _buildForm(40, Colors.green)),
                Flexible(flex: 1, child: _buildPlaceholder(Colors.lightGreen),
                ),
              ],
            ),
          ),
          Flexible(
            flex: 1,
            child: Column(
              children: <Widget>[
                Flexible(flex: 1, child: _buildPlaceholder(Colors.blue)),
                Flexible(flex: 2, child: _buildPlaceholder(Colors.lightBlue)),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildForm(int rows, Color color) {
    return Container(
      color: color,
      child: KeyboardAvoider(
        autoScroll: true,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          controller: _scrollController,
          itemCount: rows,
          itemBuilder: (context, index) {
            return Material(
              child: TextFormField(
                initialValue: 'TextFormField ${index + 1}',
                decoration: InputDecoration(fillColor: color, filled: true),
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildPlaceholder(Color color) {
    return Container(
      color: color,
      child: KeyboardAvoider(
        child: const Placeholder(),
      ),
    );
  }
}

通过这个完整的示例，您可以更好地理解如何在不同的场景下使用KeyboardAvoider插件，以及如何配置它的参数以满足您的需求。希望这些信息对您有所帮助！