Flutter 学习之路（九）底部分栏控制器

最新推荐文章于 2023-07-31 16:55:37 发布
最新推荐文章于 2023-07-31 16:55:37 发布
阅读量531 收藏
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangqinglei0307/article/details/116519237
版权

上一篇我们讲了登录页面的简单实现，其实在开发开发过程中，我们会经常使用到分栏控制器，也就是iOS中的UITabBarController。先给大家看一下效果图。

其实实现这个效果很简单，下面我依旧使用代码的方式来讲解，大家要仔细看一下代码的注视

import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/main/home/Home.dart';
import 'package:flutter_app/main/lock/Lock.dart';
import 'package:flutter_app/main/my/My.dart';
import 'package:flutter_app/util/ColorUtils.dart';
import 'package:flutter_app/widget/CustomScaffold.dart';
import 'package:fluttertoast/flut
了解本专栏 订阅专栏 解锁全文 超级会员免费看
王 哪跑！！！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Flutter 学习之路（八）登录页面布局及业务逻辑
WangQingLei0307的博客
05-07 1217
上一讲我们说到了main.dart页面跳转到到登录页面，那么今天就讲一下一个完整的页面逻辑是如何实现的。 还是和上面一样，我们通过代码讲解的方式来实现 import 'package:flutter/cupertino.dart'; class Login extends StatefulWidget { @override _LoginState createState() => _LoginState(); } class _LoginState extends State&l
Flutter 学习之路 –TextView富文本
01-07
第一步：在pubspec.yaml 文件中 导入  ...import 'package:flutter/cupertino.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:url_l
Flutter 状态栏完美攻略
最新发布
NotBad_的博客
07-31 1175
【代码】Flutter 状态栏完美攻略。
Flutter 沉浸式状态栏 安全区域 SafeArea以外的刘海屏 设置颜色
丿灬安之若死
03-25 3024
白色+黑 import 'dart:io'; import 'package:flutter/services.dart'; void main() { runApp(MyApp()); //白色 if (Platform.isAndroid) { // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后，是为了在渲染后进行set赋值，覆盖状态栏，写在渲染之前MaterialApp组件会覆盖掉这个值。 SystemUiOverlayStyle systemUi.
Flutter组件--分段控制器(DefaultTabController)
eastWind1101的博客
10-20 1787
Flutter中分段控制器, DefaultTabController,TabBar,TabBarView
Flutter状态栏颜色设置
AnHuiKeJiXueYuanGIS的博客
04-20 5017
一、设置单个页面状态栏 SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle( statusBarColor: Color(0xFFF2F3F7), //状态栏背景颜色 statusBarIconBrightness: Brightness.dark // dark:一般显示黑色 light：一般显示白色 )); 对于单个页面只需在initState 或build 方法中添加...
flutter获取状态栏高度及安全区域
weixin_30497527的博客
11-04 1792
获取状态栏高度： final double statusBarHeight = MediaQuery.of(context).padding.top; 所谓安全区域，就是适配现在一些刘海屏之类的非常规显示屏，在flutter中除了根据上面的方法获取到状态栏高度，给页面加对应的状态栏高度padding，还有一个专门的widget用来显示安全区域内容：SafeArea 下面是对比图： ...
Flutter 安全区域SafeArea
丿灬安之若死
02-02 4033
效果 背景。。由于刘海屏泛滥。Flutter为了适配安全区域单独弄出来一个Api SafeArea 使用非常便捷 import 'package:flutter/material.dart'; class SafeAreaDemo extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea(child: Container( color: Colo
Flutter质感设计之持久底部面板
08-27
主要为大家详细介绍了Flutter质感设计之持久底部面板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Flutter质感设计之模态底部面板
08-27
主要为大家详细介绍了Flutter质感设计之模态底部面板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Flutter学习教程之Route跳转以及数据传递
01-04
而且Flutter当中叫做Route，它就是与用户打交道的页面。本文详细探索一下Flutter当中页面之间是怎么交互的。 Route类似Android中Activity，所以Flutter中的页面跳转类似Android中Activity之间跳转，Intent携带传递...
Flutter学习笔记仿闲鱼底部导航栏带有中间凸起图标
08-10
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标
Flutter 使用SafeArea终结沉浸式状态栏、刘海屏与虚拟键之乱（竖屏篇）
热门推荐
流浪的独角兽的博客
03-11 1万+
Iphone普通系列 待测 IphoneX系列： 未使用SafeArea的状况：充满全屏，顶部状态栏和底部操作区都被背景图片充满 使用SafeArea的状况：顶部状态栏和底部操作区背景变成白色，MediaQuery.of(context).padding的top值为顶部高度，bottom值为底部高度 宽高固定不变 模拟器Pixel 2 XL，Android P，模拟刘海屏，底部为虚拟按键 全屏代码...
【Flutter 问题系列第 45 篇】Flutter 改变状态栏的背景颜色和字体颜色
“Allen Su”的博客
09-12 3719
Flutter 改变状态栏的背景颜色和字体颜色
flutter 设置状态栏的颜色,背景appBar
梨子社区
05-22 2137
flutter 设置状态栏的颜色,背景appBar: AppBar( elevation: 0.5, brightness: Brightness.light, 在有AppBar的界面,状态栏一般有Brightness.dark,和Brightness.light两种模式,分别是白色的导航栏字体颜色和黑色的字体颜色 appBar: AppBar( elevation: 0.5, brightness: Brightness.light, back...
html 切换状态分栏
zww学习笔记
08-13 4648
一个自己的分栏工具，可以快速创建分栏效果。 HTML：<div class="g-header"> <!-- 导航栏 --> <div class="g-nav"> <div class="g-wrap"> <ul class="g-nav-list"> <li ><span id="doing">分栏一</s
flutter布局-9-appbar导航栏和状态栏
weixin_34227447的博客
11-11 1088
示例 github：flutterlayout https://github.com/LiuC520/flutterlayout MaterialApp 连载：flutter布局-1-column 连载：flutter布局-2-row 连载：flutter布局-3-center 连载：flutter布局-4-container 连载：[flutter布局-5-Matrix4矩阵变换 连载：flut...
flutter底部导航栏
代码小疯子
07-06 4482
flutter BottomNavigationBar 一般来说，点击底部导航栏都是要进行页面我们需要动态的改变一些状态，所以，我们要继承自StatefulWidget. bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合 开发底部导航栏。 1 基本构造方法说明 1.1 BottomNavig...
Flutter 下拉刷新、上拉加载flutter_easyrefresh的使用
WangQingLei0307的博客
06-29 1万+
在开发过程中我们经常使用到列表，而使用列表我们就很容易使用到下拉刷新和上拉加载。 而这个时候我们就可以使用大佬为我们封装好的插件进行更加方便的使用。 今天向大家介绍的插件是flutter_easyrefresh，flutter_easyrefresh在我们开发中使用还是比较多的，下面给大家介绍一下flutter_easyrefresh 先附上两张效果图，分别是刷新和加载 下面就是集成 首先我们先导入自己所需要的使用的插件版本，如果插件版本和Flutter版本对应不上，会提示错误，我们根据.
使用flutter写一个视频控制器
06-10
好的，以下是一个简单的Flutter视频控制器的实现： ```dart import 'package:flutter/material.dart'; import 'package:video_player/video_player.dart'; class VideoPlayerController extends StatefulWidget { final String videoUrl; VideoPlayerController({required this.videoUrl}); @override _VideoPlayerControllerState createState() => _VideoPlayerControllerState(); } class _VideoPlayerControllerState extends State<VideoPlayerController> { late VideoPlayerController _videoPlayerController; late Future<void> _initializeVideoPlayerFuture; @override void initState() { super.initState(); // 创建一个VideoPlayerController对象 _videoPlayerController = VideoPlayerController.network(widget.videoUrl); // 初始化VideoPlayerController对象 _initializeVideoPlayerFuture = _videoPlayerController.initialize(); // 开始播放视频 _videoPlayerController.play(); } @override void dispose() { // 释放VideoPlayerController对象 _videoPlayerController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: FutureBuilder( future: _initializeVideoPlayerFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { return AspectRatio( aspectRatio: _videoPlayerController.value.aspectRatio, // 创建一个VideoPlayer对象 child: VideoPlayer(_videoPlayerController), ); } else { return Center( child: CircularProgressIndicator(), ); } }, ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: Icon( _videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow, ), onPressed: () { setState(() { if (_videoPlayerController.value.isPlaying) { _videoPlayerController.pause(); } else { _videoPlayerController.play(); } }); }, ), IconButton( icon: Icon(Icons.fullscreen), onPressed: () { // 进入全屏模式 _videoPlayerController.pause(); Navigator.push( context, MaterialPageRoute( builder: (context) => FullScreenVideoPlayer( videoPlayerController: _videoPlayerController, ), ), ); }, ), IconButton( icon: Icon(Icons.volume_up), onPressed: () { setState(() { _videoPlayerController.setVolume(1.0); }); }, ), ], ), ), ); } } class FullScreenVideoPlayer extends StatefulWidget { final VideoPlayerController videoPlayerController; FullScreenVideoPlayer({required this.videoPlayerController}); @override _FullScreenVideoPlayerState createState() => _FullScreenVideoPlayerState(); } class _FullScreenVideoPlayerState extends State<FullScreenVideoPlayer> { late VideoPlayerController _videoPlayerController; late Future<void> _initializeVideoPlayerFuture; @override void initState() { super.initState(); // 初始化VideoPlayerController对象 _videoPlayerController = widget.videoPlayerController; _initializeVideoPlayerFuture = _videoPlayerController.initialize(); // 开始播放视频 _videoPlayerController.play(); } @override void dispose() { // 释放VideoPlayerController对象 _videoPlayerController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: FutureBuilder( future: _initializeVideoPlayerFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { return AspectRatio( aspectRatio: _videoPlayerController.value.aspectRatio, // 创建一个VideoPlayer对象 child: VideoPlayer(_videoPlayerController), ); } else { return Center( child: CircularProgressIndicator(), ); } }, ), bottomNavigationBar: BottomAppBar( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( icon: Icon( _videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow, ), onPressed: () { setState(() { if (_videoPlayerController.value.isPlaying) { _videoPlayerController.pause(); } else { _videoPlayerController.play(); } }); }, ), IconButton( icon: Icon(Icons.fullscreen_exit), onPressed: () { // 退出全屏模式 _videoPlayerController.pause(); Navigator.pop(context); }, ), IconButton( icon: Icon(Icons.volume_up), onPressed: () { setState(() { _videoPlayerController.setVolume(1.0); }); }, ), ], ), ), ); } } ``` 以上代码创建了一个包含视频播放器的页面，并在底部添加了一些控制按钮。在底部导航栏中，有一个“全屏”按钮，可以让用户进入全屏模式观看视频。同时，该页面也为竖屏模式做了适配，保证用户在不同设备上都能获得良好的观看体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王 哪跑！！！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值