如何使小部件粘在键盘顶部 [英] How to make widget stick to top of keyboard

问题描述

我想制作一个贴在页面底部的小部件，然后固定在键盘顶部(当它出现时).

I'd like to make a widget that sticks to the bottom of the page, and then is pinned to the top of the keyboard (when it appears).

请注意下图中输入文本字段是如何固定到键盘的:

Note how the input textfield is pinned to the keyboard in the image below:

我该怎么做?我尝试将它放在 bottomNavigationBar 中，但这(显然)不起作用.有没有内置的方法可以做到这一点?

How would I do this? I tried putting it in the bottomNavigationBar, but this (obviously) didn't work. Is there a builtin way to do this?

推荐答案

这是你想要的东西的一个工作示例.我认为！只需复制/粘贴/运行

This is a working example of the thing you want. I think! Just copy/paste/run

此示例中重要的是展开.一个非常好的小部件，可以扩展到尽可能多的空间.结果是尽可能地将聊天框向下推
(屏幕底部或键盘底部)

What's important in this example is the Expanded. A really nice widget that expands to as much space as it can get. And in result pushing the chat box down as much as possible
(Bottom of the screen or bottom of the keyboard)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: 'Flutter Demo',
            theme: new ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;

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

class _MyHomePageState extends State<MyHomePage> {

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
            appBar: new AppBar(
                title: new Text('49715760 Stackoverflow'),
            ),
            body: new Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                    new Expanded(
                        child: new Material(
                            color: Colors.red,
                            child: new Text("Filled"),
                        ),
                    ),
                    new Container(
                        color: Colors.white,
                        padding: new EdgeInsets.all(10.0),
                        child: new TextField(
                            decoration: new InputDecoration(
                                hintText: 'Chat message',
                            ),
                        ),
                    ),
                ],
            ),
        );
    }
}

这篇关于如何使小部件粘在键盘顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！