Question

当我尝试在应用程序底部添加一个Slider时，整个BottomAppBar会向上移动到中心，正文内容（“测试”）消失了，如屏幕截图所示：

如何在两个图标旁边添加一个滑块而不破坏整个布局？
这是我的代码：

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: () => {},
              ),
            ],
          ),
        ),
      ),
    ),
  );

Answer 1

我发现了这个问题，问题是滑块占据了整个屏幕的高度并扩展了BAB的高度，我通过将滑块作为容器的父项并为其设置高度来运行一种快速的解决方案，但我相信还有更好的方法。给你看这个

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: () => {},
        ),
      ],
    ),
  ),

和结果：

Answer 2

使用IntrinsicHeight。这样一来，它便可以使用所需的确切高度，而无需更多。

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

这给了我们

Answer 3

来自Slider文档

默认情况下，滑块会在垂直居中的情况下尽可能宽。如果设置了无限制的约束，它将尝试使轨道宽144像素（每边都有空白），并将垂直收缩包装。

所以这就是为什么Row和整个BottomAppBar总是向上移动到中心的原因。

但是您可以使用kBottomNavigationBarHeight（默认为double = 56.0，您可以在constants.dart文件中找到它）进行修正，该变量会不断增加以获取底部导航栏的高度。然后可以用SizedBox或Container包装行

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

如何防止滑块弄乱我的布局？

3 个答案: