首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter在BottomNavigationBar小工具的中间放置一个按钮

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高质量的原生用户界面。BottomNavigationBar是Flutter中常用的底部导航栏小工具,用于在应用程序底部显示多个导航选项。

要在BottomNavigationBar的中间放置一个按钮,可以使用自定义的BottomAppBar小部件。BottomAppBar提供了一个floatingActionButton参数,可以将一个浮动操作按钮放置在底部导航栏的中间位置。

以下是实现这个功能的示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BottomNavigationBar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BottomNavigationBar'),
      ),
      body: Center(
        child: Text('Selected Index: $_selectedIndex'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              onPressed: () => _onItemTapped(0),
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () => _onItemTapped(1),
            ),
            SizedBox(), // 空的占位符
            IconButton(
              icon: Icon(Icons.notifications),
              onPressed: () => _onItemTapped(2),
            ),
            IconButton(
              icon: Icon(Icons.person),
              onPressed: () => _onItemTapped(3),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // 在这里处理按钮点击事件
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

在上述代码中,我们使用了BottomAppBar作为底部导航栏,并通过Row和IconButton来创建导航选项。我们将一个SizedBox作为占位符,以便在中间位置留出空间。同时,我们使用了floatingActionButton参数来添加一个浮动操作按钮,并通过floatingActionButtonLocation参数将其放置在底部导航栏的中间位置。

这样,我们就实现了在Flutter的BottomNavigationBar小工具中间放置一个按钮的功能。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云官网:https://cloud.tencent.com/
  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云区块链服务(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙解决方案:https://cloud.tencent.com/solution/metaverse
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

RefreshCallback 类型方法 , 该方法是一个异步方法 , 当 RefreshIndicator 发生下拉操作时, 回调该方法 ; 异步方法 , 方法体前添加 async 关键字 ; 该方法主要作用是暂停...500 ms , 然后返回空 ; /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 方法体前添加 async 关键字 Future...子组件居中方式, 居中放置 alignment: Alignment.center, // 子组件, 子组件设置为一个 Column...// 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center, // 子组件, 子组件设置为一个...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 方法体前添加 async 关键字

2.7K00
  • Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

    key, this.appBar, // 顶部标题栏 this.body, // 中间显示核心部分 , 标题栏下面的部分都是 this.floatingActionButton...= null), super(key: key); 二、底部导航栏整体架构 ---- 通过设置 Scaffold 组件 bottomNavigationBar 字段 , 为其设置一个 BottomNavigationBar..., 同一时间只显示一个 ; 三、BottomNavigationBar 底部导航栏 ---- 通过 Scaffold 组件 bottomNavigationBar 字段 , 可以设置底部导航栏菜单..., 设置一个 BottomNavigationBar 组件 ; BottomNavigationBar 组件中可设置 int currentIndex 当前索引 , ValueChanged?...onTap 点击事件 , BottomNavigationBar 组件需要设置组件类型 , BottomNavigationBarType?

    6.1K50

    FlutterFlutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

    children: [] 即可 , 中括号 [] 中是多个组件集合 , 使用逗号隔开 ; 示例代码 : // 水平方向排列线性布局 Row( children: [ 组件...width 和 height 字段设置组件宽高属性 , child 字段设置要设置大小组件 ; // 使用 SizedBox 组件约束布局大小 SizedBox( width: 宽度像素值,...// 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center, // 子组件, 子组件设置为一个...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 方法体前添加 async 关键字...Row 组件中 , 横向布局中放置了两个组件 , 第一个 Image 组件显示原始图片 , 第二个组件是经过 SizedBox 组件约束大小 , 和 ClipOval 组件裁剪成圆形后效果 ; 六

    2.3K00

    Flutter 中创建可拖动浮动操作按钮

    本教程有一个示例,说明您需要做什么才能创建浮动操作按钮,只要它位于父小部件内,就可以将其拖动到屏幕周围任何位置。 创建可拖动浮动操作按钮 我们将为这样小部件创建一个类。...一个浮动动作按钮通常可以点击时执行一个动作,所以我们添加一个名为onPressed( VoidCallback) 参数作为参数。...通常,所需行为是onPressed仅在点击按钮时调用回调,而不是拖动结束时调用。然而,当拖动结束时,指针向上事件也会被触发。作为解决方案,我们需要跟踪按钮是否被拖动。...所以,我们可以检查内部onPointerUpcallback 仅onPressed值为_isDraggingis 时调用回调false。 下面是用于创建可拖动浮动操作按钮类。...一个简单圆形小部件作为child参数传递,这意味着它成为可拖动按钮。您可以为按钮使用任何小部件,包括 Flutter FloatingActionButton小部件。

    5.7K10

    Flutter底部tab切换保持页面状态几种方法

    第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以一个控件上面放置一个控件,但唯一不同是,IndexdStack同一时刻只能显示子控件中一个控件..._currentIndex], bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时颜色...使用IndexedStack来保持页面状态优点就是配置简单,但是它也有很大缺点:IndexedStack中管理子页面一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一个页面...AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态时候,其配置步骤如下: import 'package:flutter/material.dart..._pages, ), bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时颜色

    6.1K20

    Flutter】StatefulWidget 组件 ( 创建 StatefulWidget 组件 | MaterialApp 组件 | Scaffold 组件 )

    : MaterialApp : 材料设计 APP 组件 , 通常用作页面的根节点 ; Scaffold : Flutter 封装带有 AppBar , 底部导航栏 BottomNavigationBar..., 侧边栏 组件 , 使用该组件可以很容易实现一个复杂导航页面 ; AppBar : 顶部导航栏 ; BottomNavigationBar : 底部导航栏 ; RefreshIndicator..., 输入新组件名称 , StatefulWidgetPage 名称 , 然后点击回车 , 就可以生成一个 StatefulWidget 组件 ; 新生成代码如下 : import 'package...= null), super(key: key); } 四、Scaffold 组件 ---- Scaffold 组件是一个完整页面组件 , 封装有 AppBar , 底部导航栏 BottomNavigationBar..., 侧边栏组件 , 使用该组件可以很容易实现一个复杂导航页面 ; Scaffold 组件常用设置选项 : 顶部标题栏设置 : appBar ; 界面主体子组件设置 : body ; 悬浮按钮设置 :

    2K01

    Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

    组件是底部导航栏 , 用于设置给 Scaffold 组件 bottomNavigationBar 字段 ; 下面是 BottomNavigationBar 组件构造函数源码 , 该构造函数可选参数列表就是可以设置字段属性...可以改变页面状态 ; 设置一个成员变量 , 标识当前选中索引值 ; /// 当前被选中底部导航栏索引 int _currentSelectedIndex = 0; 将 BottomNavigationBar...回调事件 , 传入一个匿名回调函数 , 该匿名方法中回调 StatefulWidget 组件 setState 设置状态方法 , 修改当前选中索引 , 之后 BottomNavigationBar...// 设置 child 子组件居中方式, 居中放置 alignment: Alignment.center, // 子组件, 子组件设置为一个...中可以设置属性 decoration: BoxDecoration(color: Colors.white), // 设置 child 子组件居中方式, 居中放置

    2.3K00

    Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

    UI 显示 ; 设置点击方法 : BottomNavigationBar onTap 属性设置点击方法 , 传入 index 索引 , 该索引值是被点击按钮索引 , 该方法中主要操作当前 currentIndex...属性变量 , 以及 PageView 页面跳转 ; 底部按钮设置 : BottomNavigationBar item 属性设置若干 BottomNavigationBarItem 类型点击按钮...与 PageView 关联 ---- BottomNavigationBar 被动设备选中状态 : BottomNavigationBar 索引通过一个组件内部定义私有变量 _currentIndex...私有变量 , 即可控制 BottomNavigationBar 选中状态 ; BottomNavigationBar 主动设置选中状态 : BottomNavigationBar onTap...= index; }); }, } PageView 被动设置选中状态 : BottomNavigationBar 底部导航栏中点击导航按钮 , 切换页面 , 使用 PageView

    4.4K20

    flutter系列之:做一个下载按钮动画

    简介我们app开发过程中经常会用到一些表示进度类动画效果,比如一个下载按钮,我们希望按钮能够动态显示下载进度,这样可以给用户一些直观印象,那么flutter一个下载按钮动画应该如何制作呢...定义下载状态我们真正开发下载按钮之前,首先定义几个下载状态,因为不同下载状态导致按钮展示样子也是不一样,我们用下面的一个枚举类来设置按钮下载状态:enum DownloadStatus {...因为涉及到复杂状态变化,所以简单AnimatedWidget已经满足不了我们需求了,这里就需要用到flutterAnimatedBuilder组件了。...未开始下载之前,我们希望downloadButton是一个长条形按钮按钮文字显示GET,下载过程中希望是一个类似CircularProgressIndicator动画,可以根据下载进度来动态变化...因为在下载过程中,还有停止功能,所以我们CircularProgressIndicator上再放一个stop icon,最后将这个stack封装在AnimatedOpacity中,实现整体一个淡入淡出功能

    44231

    Flutte部件目录-Material Components 顶

    实现Material Design指南视觉,行为和运动丰富小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录中更多小部件。...BottomNavigationBar小部件实现此组件。 一个显示应用底部材质小部件,用于少量视图中进行选择,通常介于3到5之间。...底部导航栏由文本标签,图标或两者多个项目组成,并放置一块材料顶部。 它提供了应用程序顶级视图之间快速导航。 对于更大屏幕,侧面导航可能更适合。...按钮 RaisedButton 材质设计凸起按钮一个凸起按钮一个矩形材料悬停在界面上。 ? ?...IconButton 图标按钮一个打印材质小部件上图片,通过填充颜色(墨水)对触摸作出反应。 ?

    9.5K40

    Flutter实现底部菜单导航

    简介 现在我们 APP 上面都会在屏幕下方有一排按钮,点击不同按钮可以进入不同界面。就是说界面的底部会有一排按钮导航。可看下面的图示。 完成图示 ? 程序工程目录 ?...梳理下实现步骤 我们需要实现这个底部菜单导航,就需要有底部菜单那一排图标按钮。图标按钮是固定在一个工具栏 “bar” 上面。...然后呢,需要分别需要有按钮对应界面,就是说按钮有多少个,那么界面需要对应有多少个。我们来一个清单列表: 按钮图标区域。由于展示方式都是一样,我们需要有一个单独控件,循环出来就好。...用于展示按钮图标,并且能固定在底部。 首页。用于将工具栏放入界面中,并且将按钮对应界面作为它子元素存放于其中。 不同按钮对应界面。我们点击图标按钮时候,展示不同界面。...'; import 'navigation_icon_view.dart'; // 如果是一个路径下,可以直接使用对应文件名 // 创建一个 带有状态 Widget Index class

    4.3K10

    Flutter lesson 7: Flutter组件之基础组件(三)

    web前端中我们使用图标可以自己定义字体与SVG,使用阿里图标上面的图标。Flutter中,google则为我们集成了一些常用图标。...是我们自己定义字体 ? 字体呢就是我们阿里图标上面下载下来文件。 这些就是关于 Icon 简单介绍。 RaisedButton 其实这就是一个按钮一个凸起材质矩形按钮。...> {}, ), floatingActionButtonLocation 前面讲的是设置一个浮动按钮,这个浮动按钮位置默认是右下角。...设置bottomNavigationBar时候,可能页面会很丑,我们可以放弃使用这个属性 drawer 与 endDrawer 这两个都是抽屉盒子,drawer是从左往右滑动时候出现,endDrawer...bottomNavigationBar 底部设置一个导航组件 bottomNavigationBar: BottomAppBar( shape: CircularNotchedRectangle(

    1.5K50
    领券