Question

我刚刚开始颤振，我想创建一个带有FAB和一个缺口的底部appbar。

我的脚手架代码如下：

return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blueGrey,
        notchMargin: 2.0,
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.cancel), title: Text("Title")),
          BottomNavigationBarItem(
              icon: Icon(Icons.cancel), title: Text("Title")),
        ]),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

但是，此代码未显示该缺口。它确实对齐了FAB，并在应用栏中显示了元素，但是没有缺口。

Answer 1

我只运行了您的代码（已修复），并且在我的工作端成功了。您可能想使用更大的缺口裕度来查看效果。

在询问UI问题时，屏幕快照也很有帮助。

这是我的模拟器Screenshot showing notch的屏幕截图

缺口BottomAppBar颤动

1 个答案: