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

如何在横向模式下将flutter BottomNavigationBar放置在左侧?

在横向模式下将Flutter BottomNavigationBar放置在左侧,可以通过自定义布局和使用Stack组件来实现。

以下是一种实现方式:

  1. 创建一个StatefulWidget,命名为CustomBottomNavigationBar。
代码语言:txt
复制
class CustomBottomNavigationBar extends StatefulWidget {
  @override
  _CustomBottomNavigationBarState createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState
    extends State<CustomBottomNavigationBar> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Offstage(
            offstage: _currentIndex != 0,
            child: _buildPage1(),
          ),
          Offstage(
            offstage: _currentIndex != 1,
            child: _buildPage2(),
          ),
          Offstage(
            offstage: _currentIndex != 2,
            child: _buildPage3(),
          ),
        ],
      ),
      bottomNavigationBar: Row(
        children: [
          Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _currentIndex = 0;
                });
              },
              child: Container(
                color: _currentIndex == 0 ? Colors.blue : Colors.transparent,
                child: Center(
                  child: Text(
                    'Page 1',
                    style: TextStyle(
                      color: _currentIndex == 0 ? Colors.white : Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _currentIndex = 1;
                });
              },
              child: Container(
                color: _currentIndex == 1 ? Colors.blue : Colors.transparent,
                child: Center(
                  child: Text(
                    'Page 2',
                    style: TextStyle(
                      color: _currentIndex == 1 ? Colors.white : Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _currentIndex = 2;
                });
              },
              child: Container(
                color: _currentIndex == 2 ? Colors.blue : Colors.transparent,
                child: Center(
                  child: Text(
                    'Page 3',
                    style: TextStyle(
                      color: _currentIndex == 2 ? Colors.white : Colors.black,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildPage1() {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text(
          'Page 1',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
    );
  }

  Widget _buildPage2() {
    return Container(
      color: Colors.green,
      child: Center(
        child: Text(
          'Page 2',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
    );
  }

  Widget _buildPage3() {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Page 3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
    );
  }
}
  1. 在主页面中使用CustomBottomNavigationBar。
代码语言:txt
复制
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter BottomNavigationBar'),
      ),
      body: CustomBottomNavigationBar(),
    );
  }
}

这样,就可以在横向模式下将Flutter BottomNavigationBar放置在左侧。通过点击底部的不同按钮,可以切换显示不同的页面内容。

请注意,以上代码仅为示例,您可以根据实际需求进行修改和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

掌握Flutter底部导航栏:畅游导航之旅

我们介绍如何创建基本的底部导航栏结构,自定义其外观,实现与页面的切换和状态管理,并探索一些高级功能,徽章、动画效果等。...Flutter中,开发者可以使用内置的BottomNavigationBar组件轻松创建和定制底部导航栏,同时结合其他Flutter组件和功能实现更丰富的导航体验。...接下来的章节中,我们深入探讨如何在Flutter中创建和定制底部导航栏,包括基本结构的构建、外观的定制、与页面的切换以及状态管理等方面的内容,帮助读者全面掌握底部导航栏的实现技巧与方法。 3....Flutter中,实现底部导航栏与页面切换通常有两种常见的方式:使用IndexedStack和利用PageView。本节分别介绍这两种方式的实现方法。...通过多个页面放置一个PageView中,并配合底部导航栏实现页面切换,可以为用户提供更加流畅的导航体验。

36110

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

: 单节点布局组件 ; Opacity : 常用于修改组件透明度 ; ClipOval : 裁剪布局组件 , 可以布局裁剪成圆形 ; ClipRRect : 裁剪布局组件 , 可以布局裁剪成方形...设置 // items 可以设置多个 BottomNavigationBarItem bottomNavigationBar: BottomNavigationBar(...中可以设置的属性 decoration: BoxDecoration(color: Colors.white), // 设置 child 子组件居中方式, 居中放置...Future.delayed(Duration(milliseconds: 500)); return null; } } 运行效果展示 : 第二行的整体布局放在 Row 组件中 , 横向布局中放置了两个组件.../flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程 : https://flutter.cn/docs/cookbook Flutter CodeLab

2.3K00
  • Flutter 中使用 NavigationRail 和 BottomNavigationBarFlutter专题33】

    Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA...本文向您展示如何使用NavigationRail和BottomNavigationBar Flutter 中创建自适应布局。我们浏览一这个概念,然后通过一个完整的例子来在实践中应用这个概念。...NavigationRail小部件用于创建位于应用左侧或右侧的“垂直标签栏”。它非常适合平板电脑、笔记本电脑、电视等宽屏设备。它通常包含多个视图,让用户可以轻松地不同视图之间切换。...BottomNavigationBar小部件用于创建非常适合智能手机的底部标签栏。它由多个选项卡组成,让用户可以轻松地视图之间导航。...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记 您已经学习了一种使用 NavigationRail 和 BottomNavigationBar

    2.1K50

    何在flutter中构建响应式布局(第五节)

    Flutter 中设计响应式布局没有硬性规定。本文中,我向您展示一些设计此类布局时可以遵循的方法。...继续 Flutter 中构建响应式布局之前,我想说明一 Android和iOS如何处理不同屏幕尺寸的原生布局。...Flutter 中的响应能力 正如我之前所说,我介绍开发响应式布局所需的重要概念,然后,您可以选择如何在应用程序中实现它们。 1. 媒体查询 您可以使用?MediaQuery来检索?...可以看到, Flutter 中创建拆分视图真的很容易。您只需使用 a 将它们并排放置Row,然后,为了填满整个空间,只需使用Expanded小部件包装两个视图。...), ); } } 在这里,我使用OrientationBuilder了LayoutBuilder来breakpointWidth根据方向改变 ,因为我不想PeopleView处于横向模式小屏幕手机上显示

    2.8K10

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

    可以改变页面状态 ; 设置一个成员变量 , 标识当前选中的索引值 ; /// 当前被选中的底部导航栏索引 int _currentSelectedIndex = 0; BottomNavigationBar...回调事件 , 传入一个匿名回调函数 , 该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar...: 三目运算符 ), ); } } 运行效果 : 六、 相关资源 ---- 参考资料 : 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

    2.3K00

    Flutter 全局控制底部导航栏和自定义导航栏的方法

    接下来,我们探讨如何实现全局控制底部导航栏和自定义导航栏的方法。 3. 枚举类型的使用 Flutter中,枚举类型(Enum)是一种有限的、离散的数据类型,用于表示一组相关的常量值。...Flutter中,枚举类型通常用于表示一组相关的选项或状态,例如不同的导航栏类型、主题模式、状态等。...应用案例 在这个应用案例中,我们展示如何在一个 Flutter 应用中实现全局控制导航栏,根据用户的偏好动态切换底部导航栏和自定义导航栏。...代码实现 在这一部分,我们展示如何在 Flutter 中实现全局控制导航栏,并给出详细的代码示例和解释。...代码实现: 我们展示了一个完整的代码示例,演示了如何在 Flutter 应用中实现全局控制导航栏的功能。

    34710

    Flutter 全栈式——页面框架

    一个完整的Flutter项目是由这个主组件开始的。 MaterialApp属性详解 属性 类型 简述 home Widget 主页。...GenerateAppTitle 与title一样,但含有一个context参数用于做本地化 theme ThemeData 应用程序的主题,各种的定制颜色都可以设置,用于程序主题切换 darkTheme ThemeData 深色模式的主题...模式显示右上角的debug横幅 debugShowMaterialGrid bool debug模式是否显示Material网格 // 构建UI前,设置一些属性 MaterialApp(...默认为 ThemeData.scaffoldBackgroundColor bottomNavigationBar Widget 显示底部的导航栏 bottomSheet Widget 底部永久性显示的提示框...是一个不规则底部工具栏,它比BottomNavigationBar 灵活,可以放置文字和图标等等控件。

    2.9K30

    Flutter BottomNavigation 底部导航详解 及问题记录

    Flutter BottomNavigation 底部导航详解 主要是使用了 ScaffoldbottomNavigationBar 整个属性,在这个属性,可以添加底部图标的背景色,选中颜色,...以及是否粘贴到底部,和导航的个数 app的主页面,home指向底部导航栏的组件 home: BottomNavigation(), 底部导航栏的组件集成 StatefulWidget 在内部创建一个带有状态的组件...提供了两套预设的主题UI 这些UI有很多的常量可以直接引入使用 颜色, 按钮,图标 Colors.white // 白色颜色 Icons.home // home 图标 FloatingActionButton...// 漂浮的按钮 效果图 colors.dart中查看预设颜色值 icons.dart中查看预设图标 源码 三个文件 main.dart import 'package:flutter/material.dart...问题3: 目前dart辨析的时候,有很多括号, 格式不够优美,有没有第三方,成熟的组件以供使用 问题4: 如何在页面切换时 ,使用动画,自己写?框架有预设吗?

    3.3K10

    Flutter 搭建标签+导航框架

    前言 ---- Flutter 这个分类的第一篇文章总结了最新的 Mac 搭建 Flutter 开发环境和对声明式UI这个理解的东西,前面也有提过,准备像在 SwiftUI 分类中那样花一些功夫来写一个...模式还是按照 SwiftUI 的,我们写一个标签+导航的模式,具体的Demo 效果如下所示,我们在看几个比较具体的概念性东西。 ?...我觉得这张图能很清晰的反映出 Widget 整个 Flutter 中的位置, Flutter 的世界里,包括 Views、 View Controllers,、Layouts 等在内的概念都建立...AppBar ---- 没错,我们的导航来了,先看看它的具体的一些属性: AppBar({ Key key, this.leading,//导航条左侧需要展示的Widget...参考文章 1、Flutter快速上车之Widget 2、Flutter中文网 3、BottomNavigationBar 4、Flutter容器类组件之Scaffold、TabBar、底部导航

    1.3K10

    Flutte部件目录-Material Components 顶

    BottomNavigationBar小部件实现此组件。 一个显示应用底部的材质小部件,用于少量视图中进行选择,通常介于3到5之间。...在这种情况,假定每个项目具有不同的背景色,并且背景色将与白色形成鲜明对比。...final items → List 放置底部的导航栏内的互动条目....输入和选择 TextField 触摸文本字段放置光标并显示键盘。 TextField部件实现了这个组件。 ? Checkbox 复选框允许用户从一组中选择多个选项。...按钮封装在工具提示窗口小部件中,以便在按窗口小部件时(或者当用户采取其他适当的操作时)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。

    9.5K40

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

    Scaffold 提供了显示左侧侧拉导航栏 , 底部导航 , 浮动按钮等 API ; Scaffold 构造函数如下 : class Scaffold extends StatefulWidget {...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , BottomNavigationBarType?..., /// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画 /// 选中的状态显示底部图标的文本 /// 不选中的状态隐藏底部的文本内容 shifting...Icons.settings), const TabData(title: '学位', icon: Icons.school), ]; /// 通过 TabBar 导航栏切换展示的主要内容 /// 用于.../// 卡片中的元素居中显示 child: Center( /// 垂直方向的线性布局 child: Column( /// 主轴

    6.1K50

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

    首先看一如下视频: 通过视频我们可以看到,当通过底部tabBar页面“首页”和“分类”之间进行切换的时候,每一次进入页面的时候该页面的数据都会重新加载。...第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以一个控件上面放置另一个控件,但唯一不同的是,IndexdStack同一时刻只能显示子控件中的一个控件..._currentIndex], bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时的颜色...AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态的时候,其配置步骤如下: import 'package:flutter/material.dart..._pages, ), bottomNavigationBar: BottomNavigationBar( fixedColor: Colors.red,//底部导航栏按钮选中时的颜色

    6.1K20
    领券