有没有办法将自定义工具栏放在键盘上？答案

【问题标题】：Is there any way to put custom toolbar on the keypad?有没有办法将自定义工具栏放在键盘上？
【发布时间】：2021-05-21 01:15:42
【问题描述】：

我想在键盘上放置一个自定义工具栏，如上图所示。颤振有可能吗？还是我应该在 iOS 或 Android 端编写代码？

【问题讨论】：

标签： flutter android-keypad iphone-keypad

【解决方案1】：

您可以在下面复制粘贴运行完整代码
请参阅下面的工作演示
你可以使用包https://pub.dev/packages/keyboard_overlay
第 1 步：使用with HandleFocusNodesOverlayMixin
第 2 步：将FocusNodeOverlay 用于focusNode
第 3 步：使用 GetFocusNodeOverlay 并设置 _focusNodeOverlay = GetFocusNodeOverlay(
第 4 步：TextField 使用 TextField(focusNode: _focusNodeOverlay,
代码sn-p

class _MyHomePageState extends State<MyHomePage>
    with HandleFocusNodesOverlayMixin {
  FocusNodeOverlay _focusNodeOverlay;

  @override
  void initState() {
    _focusNodeOverlay = GetFocusNodeOverlay(
      child: TopKeyboardUtil(
        Container(
          color: Colors.white,
          height: 45,
          width: MediaQueryData.fromWindow(ui.window).size.width,
          child: Row(
            children: [
              GestureDetector(
                child: Icon(Icons.save),
                onTap: () => print("click"),
              ),
             ...
              Spacer(),
              Container(
                width: 60,
                child: Center(
                  child: DoneButtonIos(
                    backgroundColor: Colors.white,
                    textColor: Colors.green,
                    label: 'Post',
                    onSubmitted: () {
                      print("submit");
                    },
                    platforms: ['android', 'ios'],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:keyboard_overlay/keyboard_overlay.dart';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with HandleFocusNodesOverlayMixin {
  FocusNodeOverlay _focusNodeOverlay;

  @override
  void initState() {
    _focusNodeOverlay = GetFocusNodeOverlay(
      child: TopKeyboardUtil(
        Container(
          color: Colors.white,
          height: 45,
          width: MediaQueryData.fromWindow(ui.window).size.width,
          child: Row(
            children: [
              GestureDetector(
                child: Icon(Icons.save),
                onTap: () => print("click"),
              ),
              GestureDetector(
                child: Icon(Icons.computer),
                onTap: () => print("click"),
              ),
              GestureDetector(
                child: Icon(Icons.home),
                onTap: () => print("click"),
              ),
              Spacer(),
              Container(
                width: 60,
                child: Center(
                  child: DoneButtonIos(
                    backgroundColor: Colors.white,
                    textColor: Colors.green,
                    label: 'Post',
                    onSubmitted: () {
                      print("submit");
                    },
                    platforms: ['android', 'ios'],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              focusNode: _focusNodeOverlay,
              style: TextStyle(color: Colors.grey),
              decoration: InputDecoration(
                labelText: 'Type Something',
                labelStyle: TextStyle(color: Colors.black),
                fillColor: Colors.orange,
                hintStyle: TextStyle(
                  color: Colors.grey,
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.black, width: 1.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

这是一个很好的答案。谢谢。一个令人失望的是工具栏隐藏了文本字段。你知道如何解决它吗？
你可以使用 SingleChildScrollView wrap column wrap textfield。
很高兴为您提供帮助。如果对您有帮助，请投票或将此标记为答案。谢谢。

【解决方案2】：

是的，有一种方法可以实现这一点。

为您要添加的工具栏创建一个小部件。
将其设置为在输入焦点上可见。

作为参考，我将分享我如何实现这一目标的代码。

class InputDoneView extends StatelessWidget {


@override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Style.lightGrey,
      child: Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.only(top: 1.0, bottom: 1.0),
          child: CupertinoButton(
            padding: EdgeInsets.only(right: 24.0, top: 2.0, bottom: 2.0),
            onPressed: () {
              FocusScope.of(context).requestFocus(new FocusNode());
            },
            child: Text(
              "Done",
              style: TextStyle(color: Style.primaryColor,fontWeight: FontWeight.normal)
            ),
          ),
        ),
      ),
    );
  }
}

当输入字段被聚焦时在你的主视图中调用它。

showOverlay(BuildContext context) {
    if (overlayEntry != null) return;
    OverlayState overlayState = Overlay.of(context);
    overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom, right: 0.0, left: 0.0, child: InputDoneView());
    });

    overlayState.insert(overlayEntry);
  }

  removeOverlay() {
    if (overlayEntry != null) {
      overlayEntry.remove();
      overlayEntry = null;
    }
  }

【讨论】：