在键盘隐藏的颤动页面文本字段中

Posted 2023-02-23

【中文标题】在键盘隐藏的颤动页面文本字段中

【英文标题】：in flutter page textfield hidden by keyboard

【发布时间】：2019-06-09 07:24:54

【问题描述】：

我正在使用颤振制作一个有人可以评论的页面。该页面由 showModalBottomSheet 显示。但是当键盘显示在前面时，文本字段被键盘隐藏。

    flutter doctor output:
    Doctor summary (to see all details, run flutter doctor -v):
    [✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14 18A391, locale zh-Hans-CN)
    [!] android toolchain - develop for Android devices (Android SDK 28.0.3)
     ✗ Android license status unknown.
    [✓] ios toolchain - develop for iOS devices (Xcode 10.1)
    [✓] Android Studio (version 3.1)
    [!] VS Code (version 1.30.0)
    [✓] Connected device (1 available)

---

代码sn-p：

showModalBottomSheet(
            context: context,
            builder: (BuildContext sheetContext) 
              return new Container(
                height: 230.0,
                padding: const EdgeInsets.all(20.0),
                child: ListView(
                  children: <Widget>[
                    new Column(
                      children: <Widget>[
                        new Row(
                          children: <Widget>[
                            new Text(isMainFloor ? "reply author" :"reply"),
                            new Expanded(
                                child: new Text(
                              title,
                              style: new TextStyle(color: const Color(0xFF63CA6C)),
                            )),
                            new InkWell(
                              child: new Container(
                                padding:
                                    const EdgeInsets.fromLTRB(10.0, 6.0, 10.0, 6.0),
                                decoration: new BoxDecoration(
                                    border: new Border.all(
                                      color: const Color(0xFF63CA6C),
                                      width: 1.0,
                                    ),
                                    borderRadius: new BorderRadius.all(
                                        new Radius.circular(6.0))),
                                child: new Text( "send",
                                  style:
                                      new TextStyle(color: const Color(0xFF63CA6C)),
                                ),
                              ),
                              onTap: () 

                                sendReply(authorId);
                              ,
                            )
                          ],
                        ),
                        new Container(
                          height: 10.0,
                        ),
                        new TextFormField(
                          maxLines: 5,
                          controller: _inputController,
                          focusNode: _focusNode,
                          decoration: new InputDecoration(
                              hintText: "balabala……",
                              hintStyle:
                                  new TextStyle(color: const Color(0xFF808080)),
                              border: new OutlineInputBorder(
                                borderRadius: const BorderRadius.all(
                                    const Radius.circular(10.0)),
                              )),
                        ),
                        new Padding(
                            padding: EdgeInsets.only(
                                bottom: MediaQuery.of(context).viewInsets.bottom)),
                      ],
                    )
                  ],
                ),
              );
            );
      

【问题讨论】：

你检查***.com/questions/54176233/…

WorkAround 是 - 从 Container 中删除 height: 230.0, 并在填充小部件中包装列表视图 - Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(context).viewInsets.bottom), child: ListView(.... 并删除最后一个填充小部件。

TextField gets hidden when the keyboard pops in的可能重复

@anmol.majhail 我试过你的方法。但它只是一点点使用，它只移动了小距离，输入无法完全显示。我猜 BottomSheet 可能是特殊的小部件，不能表现得很好。我尝试了将这些代码包裹在 Scaffod 中，效果很好。

@ShengQiu BottomSheet 有 MaxHeight 约束 - 所以不会增加高度

【参考方案1】：

我在运行提供的最小复制时遇到了问题。但是，如果您为小部件使用恒定高度并且小部件超出了设备上显示的软键盘，则小部件可能会溢出。如果您想在TextField 上保持恒定高度，我建议使用可以适应视图大小（即展开）的小部件。

这是您可以尝试的示例代码。我使用 Expanded 在屏幕上显示详细信息，同时在 TextField Container 上保持恒定高度。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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> 
  var _inputController = TextEditingController();
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.lightBlueAccent,
                child: ListView.builder(
                  itemCount: 15,
                  itemBuilder: (context, index) 
                    return ListTile(title: Text("List Item $index"));
                  ,
                ),
              ),
            ),
            Container(
              height: 120,
              color: Colors.tealAccent,
              child: TextFormField(
                maxLines: 5,
                controller: _inputController,
                decoration: new InputDecoration(
                  hintText: "Text input",
                  hintStyle: new TextStyle(color: Colors.black),
                  border: new OutlineInputBorder(
                    borderRadius:
                        const BorderRadius.all(const Radius.circular(10.0)),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  

这是它运行的样子