时间戳

首页 > 解决方案 > 如何在颤动中在键盘和焦点文本字段之间添加空格？

flutter - 如何在颤动中在键盘和焦点文本字段之间添加空格？

问题描述

我在滚动时遇到了这个问题，当我关注文本字段时，红色容器覆盖了我想写的文本字段。如何控制滚动，使 Textfield 显示在红色容器上方？

我想在 keabord 上方显示红色 Container，当用户在 Textfield 中写入时，我想激活 nect 按钮。

在此处输入图像描述

在此处输入图像描述

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = new FocusNode();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Focus Example"),
        ),
        body: Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    flex: 9, // 90% of space => (6/(6 + 4))
                    child: LayoutBuilder(
                      builder: (context, constraint) {
                        return SingleChildScrollView(
                          child: ConstrainedBox(
                            constraints:
                                BoxConstraints(minHeight: constraint.maxHeight),
                            child: IntrinsicHeight(
                              child: Column(
                                children: <Widget>[
                                  new Container(
                                      height: 800.0,
                                      color: Colors.blue.shade200),
                                  new TextFormField(
                                    focusNode: _focusNode,
                                    decoration: new InputDecoration(
                                      hintText: 'Focus me!',
                                    ),
                                  ),
                                  new Container(
                                      height: 800.0,
                                      color: Colors.blue.shade200),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    )),
                Expanded(
                  flex: 1, // 10% of space
                  child: Container(
                    color: Colors.purple,
                    alignment: Alignment.center,
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                height: 60,
                color: Colors.red,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                        child: Text("Back",
                            style:
                                TextStyle(color: Colors.white, fontSize: 18.0)),
                        onTap: () {}),
                    Container(
                      width: 40,
                      height: 40,
                      child: FlatButton(
                        textColor: Colors.white,
                        disabledColor: Colors.grey,
                        disabledTextColor: Colors.white70,
                        padding: EdgeInsets.only(top: 0.0, bottom: 0.0),
                        splashColor: Colors.white,
                        onPressed: () {},
                        child: Icon(
                          Icons.navigate_next,
                          size: 35,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ));
  }
}

标签： flutterscrollkeyboardtextfieldonfocus

解决方案

我可以给你一个想法。试试这样的，

body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.9 - 60,
            child: Row( ..... ),   // Include SingleChildScrollView too
          ),
          Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                height: 60,
                child: Row( ... )
          )
        ]

希望能解决您的问题。

推荐阅读