Flutter BottomAppBar

最新推荐文章于 2025-05-02 09:55:53 发布

原创最新推荐文章于 2025-05-02 09:55:53 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

23 篇文章

订阅专栏

博客围绕Flutter的BottomAppBar展开，包含界面展示相关内容，聚焦于信息技术领域中移动开发里Flutter框架的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter BottomAppBar

BottomAppBar

// 底部应用栏目
class BottomAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // FAB按钮，位置是位于上面的
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: null,
      ),
      // 底部应用栏
      bottomNavigationBar: BottomAppBar(
        // FloatingActionButton和BottomAppBar之间的距离
        notchMargin: 10.0,
        color: Colors.yellow,
        child: Row(
          // 设置大小
          mainAxisSize: MainAxisSize.max,
          // 对齐方式
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(icon: Icon(Icons.share), onPressed: null),
            IconButton(icon: Icon(Icons.menu), onPressed: null),
          ],
        ),
      ),
    );
  }
}

界面展示