在 Flutter 中包裹 Material App 时，键盘“完成”不显示

Posted 2023-03-17

【中文标题】在 Flutter 中包裹 Material App 时，键盘“完成”不显示

【英文标题】：Keyboard "Done" not displaying when wrap on Material App in Flutter

【发布时间】：2022-01-17 15:40:42

【问题描述】：

我正在使用这个库keyboard_actions 在键盘显示时显示Done 按钮。一切正常，但是当我在MaterialApp 上包裹MediaQuery 时，当键盘弹出时，done 按钮不会显示。 注意：我使用此MediaQuery 来限制应用程序中的粗体文本和字体大小。那么有没有办法解决这个问题呢？

main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'FirstPage.dart';
import 'package:flutter/services.dart';

void main() async 
  runApp(const MyApp());


class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance!.window)
          .copyWith(boldText: false),
      child: MaterialApp(
        builder: (context, child) 
          return MediaQuery(
            child: child!,
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          );
        ,
        useInheritedMediaQuery: true,
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  


class MyHomePage extends StatefulWidget 
  const MyHomePage(Key? key, required this.title) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('App'),
      ),
      body: Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            SizedBox(height: 50),
            Text(
              'textArea',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 35),
            ),
            TextButton(
                onPressed: () 
                  Navigator.push(context,
                      CupertinoPageRoute(builder: (context) => FirstPage()));
                ,
                child: Text('Click'))
          ],
        ),
      ),
    );
  

FirstPage.dart

import 'package:flutter/material.dart';
import 'package:keyboard_actions/keyboard_actions.dart';
import 'package:flutter/services.dart';

class FirstPage extends StatefulWidget 
  const FirstPage(Key? key) : super(key: key);

  @override
  _FirstPageState createState() => _FirstPageState();


class _FirstPageState extends State<FirstPage> 
  final FocusNode _nodeText1 = FocusNode();

  KeyboardActionsConfig _buildConfig(BuildContext context) 
    return KeyboardActionsConfig(
      keyboardActionsPlatform: KeyboardActionsPlatform.ALL,
      keyboardBarColor: Colors.grey[200],
      nextFocus: true,
      actions: [
        KeyboardActionsItem(
          focusNode: _nodeText1,
        ),
      ],
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstPage'),
      ),
      body: KeyboardActions(
        config: _buildConfig(context),
        child: Container(
          child: Column(
            children: <Widget>[
              TextField(
                  keyboardType: TextInputType.number, focusNode: _nodeText1),
            ],
          ),
        ),
      ),
    );
  

【问题讨论】：

@JeelBhatti 是的，像这样***.com/questions/45415852/…

如果有任何疑问，请查看此解决方案。

【参考方案1】：

在顶部添加这一行：-

import 'package:flutter/services.dart';

我希望这个解决方案对你有用，如果你想使用这样的键盘完成按钮。

您必须在 TextField Widget 上添加这一行。

keyboardType: TextInputType.numberWithOptions(
              decimal: true,
              signed: true,
             ),

您还可以为不想要的受限符号添加输入。

【讨论】：

import 'package:flutter/services.dart'; 我在main.dart 和FirstPage.dart 的顶部添加了这一行，但仍然不起作用。

重启你的应用程序，这段代码在我的mac上工作。

是的，我也重新启动了，但仍然无法工作如果我在顶部使用此行 import 'package:flutter/services.dart';，它表示未使用导入。我也更新了我的代码希望你找到解决方案

更新你的包。

我将该包更新为keyboard_actions: ^3.4.5，但仍然无法使用。