Question

我正在使用flutter制作一个可以供他人评论的页面，该页面由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)

代码段：

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容器上的高度不变。

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

运行方式如下

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

1 个答案: