Flutter 如何防止滑块弄乱布局？

当我尝试将

滑块添加到我的应用程序底部时，整个
底部AppBar
向上移动到中间，主体内容（“测试”）消失，如屏幕截图所示：



如何在两个图标旁边添加滑块而不破坏整个布局？

这是我的密码：

runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Center(
          child: Text("Test"),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            children: [
              Slider(
                value: 1,
              ),
              FlatButton(
                child: Icon(Icons.photo_size_select_actual),
                onPressed: () => {},
              ),
              FlatButton(
                child: Icon(Icons.camera_alt),
                onPressed: () => {},
              ),
            ],
          ),
        ),
      ),
    ),
  );

我发现了这一点，问题是slider占据了整个屏幕的高度，并扩展了BAB的高度。我运行了一个快速解决方案，通过为slider添加一个容器并为其设置一个高度，但我相信有更好的方法。仅向您展示以下内容：

bottomNavigationBar: BottomAppBar(
    child: Row(
      children: [
        Container(
          height: 60.0,
          color: Colors.black,
          child: Slider(
            onChanged: (d) {
              setState(() {
                print(d);
              });
            },
            value: 1,
          ),
        ),
        FlatButton(
          child: Icon(Icons.photo_size_select_actual),
          onPressed: () => {},
        ),
        FlatButton(
          child: Icon(Icons.camera_alt),
          onPressed: () => {},
        ),
      ],
    ),
  ),

结果是：

使用
IntrinsicHeight
。这将允许它使用所需的确切高度，而不是更多

  bottomNavigationBar: BottomAppBar(
    child: IntrinsicHeight(
      child: Row(...),
    ),
  )

这给了我们
来自文档

默认情况下，滑块将尽可能宽，垂直居中。当给定无界约束时，它将尝试使轨迹宽144像素（每侧有边距），并垂直收缩包裹

这就是为什么这一行和整个底部AppBar总是向上移动到中心的原因

但是您可以使用
kBottomNavigationBarHeight
（默认为double=56.0，您可以在
constants.dart
文件中找到它）来解决这个问题，该文件是flatters常量，用于获取底部导航栏的高度。然后您可以使用SizedBox或Container来包装行

  bottomNavigationBar: BottomAppBar(
    child: SizedBox(
      height: kBottomNavigationBarHeight,
      child: Row( ...

你说的破坏是什么意思？到底发生了什么？BottomAppBar不再位于底部…这对我来说是“毁灭”：DThx，我选择你的答案是因为我认为这是最简单的答案！