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

Question

我正在使用颤振制作一个有人可以评论的页面。该页面由 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)),
                      ],
                    )
                  ],
                ),
              );
            });
      }

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

这是它运行的样子