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

Posted 2023-04-15

【中文标题】有没有办法将自定义工具栏放在键盘上？

【英文标题】：Is there any way to put custom toolbar on the keypad?

【发布时间】：2021-05-21 01:15:42

【问题描述】：

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

【参考方案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;