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

发布于 1周前 作者 eggper 来自 Flutter

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

描述

avoid_keyboard 包含一个名为 AvoidKeyboard 的小部件,您可以将文本字段和其他输入控件包裹在这个小部件中,以确保当键盘弹出时它们会滚动到合适的位置。与默认的 Scaffold 行为相比,使用此小部件的优势在于,您可以指定应用程序中哪些部分在键盘弹出时会发生滚动,而不是整个视口被压缩(这在固定高度列中不起作用)。

另一个优势是,AvoidKeyboard 仅在其内容实际被键盘遮挡时才会移动其内容。

开始使用

要开始使用,请将输入控件(以及任何应移出键盘范围的周围小部件树部分)包裹起来:

class AvoidKeyboardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AvoidKeyboard(
      child: Column(
        children: [
          TextField(),
          TextField(),
        ],
      ),
    );
  }
}

完成此操作后,当键盘覆盖活动控件时,视图现在会滚动到合适位置。

示例代码

下面是一个更完整的示例,展示了如何在您的应用中使用 avoid_keyboard 插件:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Avoid Keyboard Example',
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Avoid Keyboard Example")),
        body: AvoidKeyboardExample(),
        resizeToAvoidBottomInset: false,
      ),
    );
  }
}

class AvoidKeyboardExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AvoidKeyboard(
      spacing: 40, // 控件之间的间距
      child: Container(
        padding: EdgeInsets.all(30),
        child: FocusTraversalGroup(
          policy: OrderedTraversalPolicy(), // 定义焦点遍历策略
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              exampleField(
                color: Colors.blue,
                action: TextInputAction.next,
                order: 0,
              ),
              exampleField(
                color: Colors.purple[200],
                action: TextInputAction.next,
                order: 1,
              ),
              exampleField(
                color: Colors.red[200],
                action: TextInputAction.next,
                order: 2,
              ),
              exampleField(
                color: Colors.orange[200],
                action: TextInputAction.next,
                order: 3,
              ),
              exampleField(
                color: Colors.yellow[100],
                order: 4,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget exampleField({
    TextInputAction? action,
    Color? color,
    bool? autocorrect,
    double? order,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
      ),
      child: FocusTraversalOrder(
        order: NumericFocusOrder(order ?? 0), // 设置焦点顺序
        child: TextField(
          cursorColor: Colors.white,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.only(left: 10),
            focusedBorder: InputBorder.none,
            disabledBorder: InputBorder.none,
            border: InputBorder.none,
          ),
          autocorrect: autocorrect ?? true,
          textInputAction: action,
        ),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用程序,其中包含多个文本字段,并且这些文本字段在键盘弹出时不会被遮挡。通过这种方式,用户可以更方便地进行输入操作,提升用户体验。


更多关于Flutter避免键盘遮挡插件avoid_keyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter避免键盘遮挡插件avoid_keyboard的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用avoid_keyboard插件来避免键盘遮挡输入字段的示例代码。avoid_keyboard插件并不是官方插件,而是一个社区维护的插件,用于处理键盘遮挡问题。不过,在Flutter社区中,更常用的是利用FocusNodeSingleChildScrollViewMediaQuery等原生组件来处理键盘遮挡。但为了符合你的要求,这里假设存在一个名为avoid_keyboard的插件,并展示其用法(请注意,实际插件的名称和功能可能有所不同,以下代码仅为示例)。

首先,你需要在pubspec.yaml文件中添加该插件依赖(假设插件名为avoid_keyboard,实际使用时请替换为正确的插件名):

dependencies:
  flutter:
    sdk: flutter
  avoid_keyboard: ^x.y.z  # 替换为实际版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Dart文件中使用avoid_keyboard插件。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:avoid_keyboard/avoid_keyboard.dart'; // 假设插件的import路径

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Avoid Keyboard Example'),
        ),
        body: AvoidKeyboard(
          // 包裹你的主体内容
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(labelText: 'Name'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Email'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                ),
                // 可以添加更多字段
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,AvoidKeyboard组件被用来包裹你的主体内容。这个组件(假设是avoid_keyboard插件提供的)会自动处理键盘遮挡问题,确保输入字段不会被键盘遮挡。

然而,正如前面提到的,Flutter社区通常更倾向于使用原生组件和方法来处理这类问题。例如,使用SingleChildScrollView结合PaddingMediaQuery.of(context).viewInsets来调整布局,或者使用FocusNode来控制焦点移动。这些方法不依赖于第三方插件,因此在兼容性和稳定性方面通常更有保障。

以下是一个使用SingleChildScrollViewMediaQuery的示例:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Avoid Keyboard Example'),
        ),
        body: Padding(
          padding: EdgeInsets.only(
            left: 16.0,
            right: 16.0,
            bottom: MediaQuery.of(context).viewInsets.bottom, // 添加底部内边距以应对键盘
          ),
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(labelText: 'Name'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Email'),
                ),
                SizedBox(height: 16.0),
                TextField(
                  decoration: InputDecoration(labelText: 'Password'),
                  obscureText: true,
                ),
                // 可以添加更多字段
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中,通过监听MediaQuery.of(context).viewInsets.bottom来获取键盘的高度,并动态调整底部内边距,从而避免键盘遮挡输入字段。这种方法不依赖于任何第三方插件,因此在生产环境中更为常用。

回到顶部