软键盘在iOS上的Flutter Web应用程序中隐藏文本输入

nx7onnlm  于 2023-08-07  发布在  Flutter
关注(0)|答案(1)|浏览(141)

当点击Flutter应用程序(iOS Safari)的 web 版本的文本输入时,软键盘覆盖了文本输入,因此无法看到正在键入的内容。(见下面的gif)
预期的行为是文本输入将动画化以保持在软键盘上方可见,就像Flutter创建的iOS原生版本中一样。
在Flutter 3.7中,似乎resizeToAvoidBottomInset(默认为true)应该控制此行为:
如果在支架上方显示有屏幕上的键盘,则可以调整主体的大小以避免与键盘重叠,这防止了主体内的窗口小部件被键盘遮挡。
然而,在iOS上的Safari中,这似乎不是真的。
前面的问题似乎并没有解决此问题,也没有引入似乎不必要的解决方法:


的数据

  • 验证码:*
import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  const TestScreen({super.key});

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Chat')),
      body: Column(
        children: const [
          Expanded(
            child: Center(
              child: Text('Send a message to start your conversation.'),
            ),
          ),
          _MessageBar(),
        ],
      ),
    );
  }
}

class _MessageBar extends StatefulWidget {
  const _MessageBar({Key? key}) : super(key: key);

  @override
  State<_MessageBar> createState() => __MessageBarState();
}

class __MessageBarState extends State<_MessageBar> {
  late final TextEditingController _textController;
  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.grey[200],
      child: SafeArea(
        child: Padding(
          padding:
              EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
          child: Row(
            children: [
              Expanded(
                child: TextFormField(
                  keyboardType: TextInputType.text,
                  maxLines: null,
                  autofocus: true,
                  controller: _textController,
                  decoration: const InputDecoration(
                    hintText: 'Type a message',
                    border: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    contentPadding: EdgeInsets.all(8.0),
                  ),
                ),
              ),
              TextButton(
                onPressed: () => _submitMessage(),
                child: const Text('Send'),
              )
            ],
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    _textController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  void _submitMessage() async {
    final text = _textController.text;
    if (text.isEmpty) {
      return;
    }
    print({text});
    _textController.clear();
  }
}

字符串

9wbgstp7

9wbgstp71#

只是你应该给予它填充像这样:

return Scaffold(
  appBar: AppBar(title: const Text('Chat')),
  body: Column(
    children: const [
      Expanded(
        child: Center(
          child: Text('Send a message to start your conversation.'),
        ),
      ),
      Padding(
        padding: EdgeInsets.only(
            bottom: MediaQuery.of(context).viewInsets.bottom),
        child: _MessageBar(),
      )
    ],
  ),
);

字符串

相关问题