开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Flutter BottomNavigationBar边框？

Flutter BottomNavigationBar是一个底部导航栏控件，用于在应用程序底部显示多个页面之间的切换。它通常由固定数量的图标和标签组成，并且可以根据用户的交互来切换页面。

关于边框的设置，Flutter BottomNavigationBar默认不提供边框样式。但是可以通过使用Container或装饰器来添加边框效果。以下是一个示例代码：

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      label: 'School',
    ),
  ],
  selectedItemColor: Colors.amber[800],
  decoration: BoxDecoration(
    border: Border(
      top: BorderSide(
        color: Colors.grey,
        width: 0.5,
      ),
    ),
  ),
)

在上面的示例中，我们使用了decoration属性将一个边框样式应用到底部导航栏。通过Border类可以定义不同的边框样式，例如color表示边框颜色，width表示边框宽度。

对于Flutter的底部导航栏边框，腾讯云目前没有提供特定的产品或链接。但你可以参考Flutter官方文档了解更多关于BottomNavigationBar的使用：https://flutter.dev/docs/cookbook/design/navigation/bottom-navigation

请注意，以上回答基于Flutter的内部机制，与云计算、IT互联网领域的专业知识关系较小。

相关搜索:Flutter:如何去除BottomNavigationBar的边框？flutter bottomnavigationbar Flutter: pushAndRemoveUntil to a page with a bottomNavigationBar时保持bottomNavigationBar Flutter BottomNavigationBar和Signout问题 Flutter BottomNavigationBar中心图标样式 TabBar( flutter change BottomNavigationBar)高度 Flutter:如何显示bottomNavigationBar背后的内容 Flutter - bottomNavigationBar中的SelectedItemColor不工作 Flutter: BottomNavigationBar不更改活动图标颜色如何在Flutter中使用BottomNavigationBar构建页面 BottomNavigationBar Flutter - WebView webview_flutter和BottomNavigationBar在onTap时不会刷新如何在flutter中创建自定义BottomNavigationBar？Flutter -Adding a popup menu button to the BottomNavigationBar中的图标使用Flutter BottomNavigationBar重建相同的选项卡如何在Flutter中制作下面的图片BottomNavigationBar？Flutter如何使用BottomNavigationBar管理独立的导航栈？如何在Flutter中显示BottomNavigationBar中的图像？使用flutter从BottomNavigationBar上的按钮注销用户以编程方式更改BottomNavigationBar Flutter上的选项卡，而不使用BottomNavigationBar的onTap？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Flutter Widgets 之 BottomNavigationBar

注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本：1.12.13+hotfix.5 Dart版本：2.7.0 BottomNavigationBar 和 BottomNavigationBarItem...配合Scaffold控件使用可以实现底部导航效果，类似于微信底部的导航效果，下面是一个简单的底部导航案例： Scaffold( bottomNavigationBar: BottomNavigationBar...BottomNavigationBar有2种显示模式，其中一种是fixed效果，前面的展示就是fixed效果，这也是默认值，另一种是shifting效果， BottomNavigationBar(...推荐几款Github上带动画效果的底部导航 Fluid Button Bar https://github.com/gskinnerTeam/flutter_vignettes/tree/master.../vignettes/fluid_nav_bar Icon Flip Button Bar https://github.com/gskinnerTeam/flutter_vignettes/tree/

7813 0

Flutter布局基础——BottomNavigationBar

Flutter布局基础——BottomNavigationBar 背景 Flutter中BottomNavigationBar类似于 iOS 中的UITabbarController，是导航控制器的一种...--more--> BottomNavigationBar的 type 属性，默认值会根据items的个数而定；当items个数小于4个时，默认值为BottomNavigationBarType.fixed...bottomNavigationBar', theme: ThemeData.light(), home: BottomNavigationWidget(), );...'; import 'package:flutter_application_1/pages/airplay_screen.dart'; import 'package:flutter_application...参考 BottomNavigationBar Dev Doc 20个Flutter实例视频教程让你轻松上手工作

3K3 0

Flutter:让BottomNavigationBar保持状态

如果有关注过我的同学可能看过我之前的一篇名为Flutter学习笔记：BottomNavigationBar实现多个Navigation的文章，这篇文章主要是介绍了通过Navigation实现保持住让BottomNavigationBar...页面的状态，从而避免在BottomNavigationBar切换时导致页面重新initState。...但这么做有一个严重的问题，就是当我们在对应页面执行Navigator.push()时，也就是跳转页面时，BottomNavigationBar 始终保持在页面底部，如下图： ?...Placeholder for $_title tab', child: _buildChild(), ), ), ), ); 这样每次BottomNavigationBar

1.1K3 0

Flutter BottomNavigationBar不显示（显示白色）？

BottomNavigationBar 超过3个之后不显示（显示白色）？

8342 0

Flutter 边框阴影

截屏2021-04-22 14.15.22.png 要实现如果的边框阴影效果 Container( height: ScreenAdaper.width2px(78), decoration...: BoxDecoration( border: new Border.all( color: Colors.grey.withOpacity(0.2), //边框颜色...width: 1, //边框宽度 ), // 边色与边宽度 color: Colors.white, // 底色 boxShadow

3.5K2 0

Flutter布局基础——自定义BottomNavigationBar

Flutter布局基础——自定义BottomNavigationBar 背景这里我们来尝试实现一个不规则的 BottomNavigationBar，首先了解两个系统组件: floatingActionButton...key}) : super(key: key); static const String _title = 'Flutter Code Sample'; @override Widget...key}) : super(key: key); static const String _title = 'Flutter Code Sample'; @override Widget...Create', ) : null, floatingActionButtonLocation: _fabLocation, bottomNavigationBar...), ); } } 要注意floatingActionButtonLocation的设置参考 FloatingActionButton Dev Doc BottomAppBar 20个Flutter

2.1K2 0

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者：坚果华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA...成员之一，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，JavaScript等。”...本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建自适应布局。我们将浏览一下这个概念，然后通过一个完整的例子来在实践中应用这个概念。...indicatorColor }) BottomNavigationBar 构造函数： BottomNavigationBar({ Key?...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记您已经学习了一种使用 NavigationRail 和 BottomNavigationBar

2.1K5 0

Flutter基础widgets教程-BottomNavigationBar篇

1 BottomNavigationBar 显示在应用程序的底部，用于在少量视图中进行选择，通常在三到五之间。...2 构造函数 BottomNavigationBar({ Key key, @required List items, ValueChanged

1.6K15 14

Flutter跨页面改变BottomNavigationBar选中下标

思路：解决方案1： flutter内有Provider的状态管理，可以定义一个全局的Provider ，在Main函数内装载，放入顶层结构中，全局访问Provider改变Provider的状态，以此来更新...currentIndex = Provider.of(context, listen: false).index; return Scaffold( bottomNavigationBar...: BottomNavigationBar( items: _buildItemList(), type: BottomNavigationBarType.fixed...切换选中页面 class EventTabBarIndex{ // 参数为int 即需要改变的下标 int index; EventTabBarIndex(this.index); } 2.在BottomNavigationBar...: Consumer( builder:(_,provider,__){ return BottomNavigationBar(

1.1K2 0

Flutter学习笔记：BottomNavigationBar实现多个Navigation

最近我研究了一下Flutter，但是在使用Navigator的时候遇到了一个很头痛的问题，就是当我们去来回切换导航按钮时，Flutter会重新build，从而导致控件重新Build，从而会失去浏览历史。...原文点这里正文今天我们将看看Flutter的Navigation。但不仅仅是任何无聊的Navigation。? 不，女士们，先生们，来让我们把Navigation变得有趣。...一切都关于Navigator 所有Flutter应用程序都被定义为MaterialApp。...如果我们打开Flutter inspector： ?...回顾今天我们学习了很多关于Flutter导航的知识，以及如何结合BottomNavigationBar，Stack，Offstage和Navigator控件来实现多个导航堆栈。

4.3K2 0

Flutter中BottomNavigationBar 定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。...BottomNavigationBarType.shifting 动画效果；利用BottomNavigationBar实现一个App的分页切换。首先是入口文件 main.dart。...import 'package:flutter/material.dart'; // 引入拆分的Tabs组件 import 'pages/Tabs.dart'; void main(){ runApp...// lib/pages/Tabs.dart import "package:flutter/material.dart"; // 引入子页面 import 'tabs/Home.dart'; import..._currentIndex], // 底部导航条 bottomNavigationBar: BottomNavigationBar(

8913 0

Flutter 中 BottomNavigationBar 定义底部导航条

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。...利用BottomNavigationBar实现一个App的分页切换。首先是入口文件 main.dart。...import 'package:flutter/material.dart'; // 引入拆分的Tabs组件 import 'pages/Tabs.dart'; void main(){ runApp...// lib/pages/Tabs.dart import "package:flutter/material.dart"; // 引入子页面 import 'tabs/Home.dart'; import..._currentIndex], // 底部导航条 bottomNavigationBar: BottomNavigationBar(

1.2K2 0

flutter Container容器实现圆角边框

本文实例为大家分享了flutter Container容器实现圆角边框的具体代码，供大家参考，具体内容如下在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 ?...border: new Border.all(width: 1, color: Colors.red), ), child: Text("Container 的圆角边框"), ), 2 圆角矩形边框...border: new Border.all(width: 1, color: Colors.red), ), child: Text("Container 的圆角边框"), ), 3 可点击的圆角矩形边框...使用 InkWell 来实现，更多关于 InkWell 可查看 flutter InkWell 设置水波纹点击效果详述 Container( margin: EdgeInsets.only(left..."), )), ), ), ), 4 可点击的圆角矩形边框 ?

9.3K1 0

flutter中bottomNavigationBar切换组件保存状态方案

原文链接 https://www.aiprose.com/blog/107 我们在开发的时候用底部导航栏是很常见的，flutter给我们默认带了bottomNavigationBar，但是发现你直接这样写的时候...1.首先在有bottomNavigationBar的组件中加入pageview /* * 存储的四个页面，和android 中的 Fragment一样 */ var _pages;...itemCount: _pages.length, itemBuilder: (context, index) => _pages[index]), ), bottomNavigationBar...: new BottomNavigationBar( items: [ new BottomNavigationBarItem

1.8K2 0

flutter中bottomNavigationBar切换组件保存状态方案

原文链接 https://www.aiprose.com/blog/107 我们在开发的时候用底部导航栏是很常见的，flutter给我们默认带了bottomNavigationBar，但是发现你直接这样写的时候...image 1.首先在有bottomNavigationBar的组件中加入pageview /* * 存储的四个页面，和android 中的 Fragment一样 */ var _pages...itemCount: _pages.length, itemBuilder: (context, index) => _pages[index]), ), bottomNavigationBar...: new BottomNavigationBar( items: [ new BottomNavigationBarItem

1.9K2 0

Flutter开发笔记——BottomNavigationBar设置未选择Item颜色

可以用如下属性来设置 bottomNavigationBar: BottomNavigationBar( ... unselectedItemColor: Colors.grey, ... )

9411 0

Flutter 简易新闻项目目标效果对比简介代码代码地址

目标使用flutter快速开发 Android 和 iOS 的简易的新闻客户端 API使用的是 showapi(易源数据) 加载热门微信文章效果对比 Android iOS image image...#网络请求 cached_network_image: "^0.4.1" #图片加载 cupertino_icons: ^0.1.2 #icon flutter_webview_plugin...bottomNavigationBar = new BottomNavigationBar( items: navigationIcons.map(((i) => i.item)).toList...Colors.white : Colors.blue[100],//边框颜色 width: 1.0,//边框宽度 ), )...Colors.white, ) : null, ), ), ], ); } } 代码地址 Flutter-news

1.3K2 0

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

封装的带有 AppBar , 底部导航栏 BottomNavigationBar , 侧边栏的组件 , 使用该组件可以很容易实现一个复杂的导航页面 ; AppBar : 顶部导航栏 ; BottomNavigationBar...设置分割线颜色 color: Colors.red, ), // Card 组件 : 可设置圆角 , 阴影 , 边框...= null), super(key: key); } 五、相关资源 ---- 参考资料 : Flutter 官网 : https://flutter.dev/ Flutter 开发文档...: https://flutter.cn/docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com/flutter Flutter 中文社区 : https://...flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn

2K0 0

Flutter 全栈式——页面框架

一个完整的Flutter项目是由这个主组件开始的。 MaterialApp属性详解属性类型简述 home Widget 主页。...打开光栅缓存图像的棋盘格 checkerboardOffscreenLayers bool 为true时，打开棋盘格层 showSemanticsDebugger bool 为true时，打开Widget边框...默认为 ThemeData.scaffoldBackgroundColor bottomNavigationBar Widget 显示在底部的导航栏 bottomSheet Widget 底部永久性显示的提示框...floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, ); } 视频课程博主发布的相关视频课程 Flutter...全栈式开发之Dart 编程指南 [二维码] Flutter 全栈式开发指南快速上手篇直接观看 [format,png]

2.9K3 0

Flutter中的按钮组件Button

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。常见的按钮组件如下： 1. RaisedButton 凸起的按钮； 2. FlatButton 扁平化的按钮； 3....CircleBorder() 全圆形；代码示例： import 'package:flutter/material.dart'; class ButtonPage extends StatelessWidget...: [ OutlineButton( child: Text('边框按钮...Colors.yellow, onPressed:(){ print('边框按钮..._currentIndex], // 底部导航条 bottomNavigationBar: BottomNavigationBar(

4.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭