Flutter键盘吸附插件keyboard_sticky的使用

Flutter键盘吸附插件keyboard_sticky的使用

keyboard_sticky 是一个允许在软键盘顶部粘贴固定组件的UI组件。当只有软键盘显示且原始组件被覆盖时，粘贴组件会显示出来。如果没有任何软键盘或者原始组件未被覆盖，则粘贴组件不会显示。

功能

• 仅单个 TextField

  如果设置了 floating 参数为 true，fieldBuilder 将用于构建由 builder 使用的 TextField；否则，fieldBuilder 将用于构建由 floatingBuilder 使用的 TextField。

  • 原始组件将显示在键盘不可见时。
  • 当键盘可见且原始组件不可见时，浮动组件将显示。

  示例：

  KeyboardSticky.single({
    super.key,
    FocusNode? focusNode,
    TextEditingController? controller,
    FocusNode? floatingFocusNode,
    bool floating = false,
    this.useMaterial = true,
    required KeyboardStickyWrapperBuilder builder,
    required KeyboardStickyWrapperBuilder floatingBuilder,
    required KeyboardStickyFieldBuilder fieldBuilder,
  });
  

• 两个 TextField

  如果没有提供 floatingBuilder，builder 将用于构建浮动组件。如果没有提供 floatingFieldBuilder，fieldBuilder 将用于构建浮动 TextField。

  • 原始和浮动 TextField 应该共享相同的 controller，以便它们可以共享相同的文本值。
  • 然而，两个 TextField 应该有不同的 FocusNode，以便它们可以单独聚焦。

  示例：

  KeyboardSticky.both({
    super.key,
    FocusNode? focusNode,
    TextEditingController? controller,
    FocusNode? floatingFocusNode,
    TextEditingController? floatingController,
    this.useMaterial = true,
    required KeyboardStickyWrapperBuilder builder,
    required KeyboardStickyFieldBuilder fieldBuilder,
    KeyboardStickyWrapperBuilder? floatingBuilder,
    KeyboardStickyFieldBuilder? floatingFieldBuilder,
  })
  

• 手动控制浮动组件

  KeyboardStickyController 是一个混入类，提供了手动显示/隐藏浮动组件的能力。

  示例：

  abstract mixin class KeyboardStickyController {
    bool get visible; // 是否显示原始组件
    double get keyboardHeight; // 当前键盘高度
    void showFloating(); // 手动显示浮动组件
    void hideFloating(); // 手动隐藏浮动组件
  }
  

示例代码

以下是 main.dart 文件的示例代码：

import 'package:example/both.dart';
import 'package:example/only_floating.dart';
import 'package:example/only_original.dart';
import 'package:example/sticky_dropdown.dart';
import 'package:example/test.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';

final navigatorKey = GlobalKey<NavigatorState>();

final router = GoRouter(
  navigatorKey: navigatorKey,
  routes: [
    GoRoute(
      path: "/",
      parentNavigatorKey: navigatorKey,
      builder: (context, state) => const AttachableTextFieldExample(),
    ),
    GoRoute(
      path: "/chat",
      parentNavigatorKey: navigatorKey,
      redirect: (context, state) {
        if (state.pathParameters["partyId"] == null) {
          return "/";
        }
        return null;
      },
      routes: [
        GoRoute(
          path: ":partyId",
          parentNavigatorKey: navigatorKey,
          builder: (_, state) {
            print("Party route with partyId");
            final partyId = state.pathParameters["partyId"];
            return Material(
              child: PartyViewPage(
                partyId: partyId ?? "",
              ),
            );
          },
        ),
      ],
    )
  ],
);

void main() {
  runApp(
    const ScreenUtilInit(
      designSize: Size(428, 926),
      rebuildFactor: RebuildFactors.none,
      minTextAdapt: true,
      splitScreenMode: false,
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      builder: EasyLoading.init(),
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
      routeInformationProvider: router.routeInformationProvider,
    );
  }
}

class AttachableTextFieldExample extends StatelessWidget {
  const AttachableTextFieldExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text("Keyboard Sticky Example"),
      ),
      body: const Padding(
        padding: EdgeInsets.all(15),
        child: Column(
          children: [
            UnfocusButton(),
            PartyTestButton(),
            Spacer(),
            Text("Text would be sent to the floating widget"),
            SizedBox(height: 5),
            OnlyOriginalExample(),
            SizedBox(height: 20),
            Text("Text would be sent back to the original widget"),
            SizedBox(height: 5),
            OnlyFloatingExample(),
            SizedBox(height: 20),
            Text("Text sync between both fields"),
            SizedBox(height: 5),
            BothFieldsExample(),
            SizedBox(height: 20),
            StickyDropdownExample(),
            SizedBox(height: 20),
            Text("Bottom placeholder"),
          ],
        ),
      ),
    );
  }
}

class PartyTestButton extends StatelessWidget {
  const PartyTestButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () {
        context.push("/chat/party");
      },
      child: Text("Test Party"),
    );
  }
}

class UnfocusButton extends StatelessWidget {
  const UnfocusButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () {
        FocusScope.of(context).unfocus();
      },
      child: const Text("Unfocus"),
    );
  }
}