在键盘隐藏的颤动页面文本字段中 [英] in flutter page textfield hidden by keyboard

问题描述

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

I'm using flutter to make a page that someone can comment.And the page is shown by showModalBottomSheet. but the textfield is hidden by the keyboard when the keyboard showing in the front.

    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)

<小时>

代码片段:

---

Code snippet:

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)),
                      ],
                    )
                  ],
                ),
              );
            });
      }

推荐答案

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

I had issues running the minimal repro provided. However, if you're using a constant height for the widget and the widget exceeds the SoftKeyboard displayed on the device, it's likely that the widget overflowed. I suggest using widgets that can adapt to the view size (i.e. Expanded) if you'd like to keep the constant height on the TextField.

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

Here's a sample code that you can try. I've used Expanded for displaying the details on screen while keeping the constant height on the 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)),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是它的运行方式

这篇关于在键盘隐藏的颤动页面文本字段中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！