我正在构建一个具有底部导航栏的应用程序，我想在更改其高度时为该栏提供覆盖主页的功能，以防止主页中的内容减少以适应可用区域. 我怎样才能做到这一点？

我认为通过图像解释它可能会更好，所以我们开始：

这是主页与底部导航栏一起的样子：

普通应用：

当我单击黄色圆圈按钮（中间按钮）时，BottomAppBar必须增加其高度，但是当我这样做时，主要内容会减小其大小以适应可用空间。

奇怪的应用程序：

我想阻止它。我该怎么做？

这是我的代码：

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _appBarHeight = 60.0;

  void _openBottomAppBar() {
    setState(() {
      if (_appBarHeight > 60) {
        _appBarHeight = 60.0;
      } else {
        _appBarHeight = 300.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final Shader textGradient = LinearGradient(
      colors: <Color>[Theme.of(context).primaryColorDark, Theme.of(context).primaryColorLight],
    ).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0));
    return …

通过将 Angular 2 和 Typescript 与 JQuery 和 JQueryUI 一起使用，我收到以下错误：

Property 'draggable' does not exist on type 'JQuery<HTMLElement>'

我知道这.draggable()是一个依赖于 JQueryUI 的函数，我已经使用以下命令在我的 node_modules 中安装了 JQuery 和 JQueryUI：

npm install --save jquery
npm install --save @types/jquery
npm install --save @types/jqueryui

我的 Webstorm IDE 可以通过在函数上按 Ctrl+单击来突出显示并引导我到正确的位置，但控制台会显示我上面提到的错误。

我正在导入模块，import * as $ from 'jquery';我的代码是$('#element').draggable({containment: '#containment-wrapper});

谁能帮我找出错误在哪里？

更新

感谢@LLai 为我提供了解决问题的好方向。基本上，我必须在我的项目中安装 jqueryui 核心：

npm install --save-dev jqueryui

然后，我不得不进口jqueryui后jquery是这样的：

import * as $ from 'jquery';
import 'jqueryui'

好吧，这给了我很多错误，但看起来它是某些版本的问题@types/jquery …