在抽屉小部件中使用时,输入字段隐藏在键盘下

时间:2019-11-30 15:56:55

标签: flutter dart

我在抽屉中使用“文本”字段,如GIF所示,问题是当我选择文本字段时,它隐藏在键盘下而不向上滚动。

代码说明:

首先,我通过将文本字段包装在Scaffold和Single Child滚动视图中来实现文本字段,如下面的代码所示,当我选择文本字段时,该字段与键盘一起滚动,效果很好,但是问题是当我选择相同的文本字段,该文本字段添加在“抽屉”中,隐藏下键盘而不滚动。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainView(),
    );
  }
}

class MainView extends StatefulWidget {
  @override
  _MainViewState createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  /// Unique scaffold key used for drawer
  var scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      backgroundColor: Colors.white,
      endDrawer: DrawerWidget(),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: MediaQuery.of(context).size.height / 1.5,
              ),
              _buildButton(),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: TextFormField(
                    decoration: new InputDecoration(
                  hintText: 'Text Field',
                  border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.teal)),
                )),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButton() {
    return MaterialButton(
      color: Colors.black,
      padding: EdgeInsets.only(left: 5.0, right: 5.0),
      child: Text(
        'Open End Drawer',
        style: TextStyle(fontSize: 15),
      ),
      onPressed: () {
        scaffoldKey.currentState.openEndDrawer();
      },
      minWidth: 50,
      height: 30,
      textColor: Colors.white,
    );
  }
}

带文本的抽屉字段

class DrawerWidget extends StatefulWidget {
  @override
  _DrawerWidgetState createState() => _DrawerWidgetState();
}

class _DrawerWidgetState extends State<DrawerWidget> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      key: Key('drawer_sized_box'),
      width: MediaQuery.of(context).size.width * 0.35,
      child: Drawer(
          child: Column(children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 1.5,
        ),
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: TextFormField(
            decoration: new InputDecoration(
              hintText: 'Text Field',
              border: new OutlineInputBorder(
                  borderSide: new BorderSide(color: Colors.teal)),
            ),
          ),
        )
      ])),
    );
  }
}

enter image description here

0 个答案:

没有答案