Flutter（三）：Stack、Positioned、屏幕相关尺寸、Navigator路由跳转

页面尺寸

在这里插入图片描述

  • 通知栏高度：MediaQuery.of(context).padding.top
  • 顶部导航高度：kToolbarHeight
  • 底部导航高度：kBottomNavigationBarHeight
  • 屏幕宽：MediaQuery.of(context).size.width
  • 屏幕高：MediaQuery.of(context).size.height
import 'package:flutter/material.dart';// 描述文本
class DescText extends StatelessWidget {final String title;final double size;const DescText(this.title, {super.key, this.size = 10});@overrideWidget build(BuildContext context) {return Center(child: Text(title, style: TextStyle(fontSize: size, decoration: TextDecoration.none)),);}
}class ScreenSizePage extends StatefulWidget {const ScreenSizePage({super.key});@overrideState<ScreenSizePage> createState() => _ScreenSizePage();
}class _ScreenSizePage extends State<ScreenSizePage> {@overrideWidget build(BuildContext context) {// 屏幕宽度double screenWidth = MediaQuery.of(context).size.width;// 屏幕高度double screenHeight = MediaQuery.of(context).size.height;// 通知栏高度double noticeHeight = MediaQuery.of(context).padding.top;// 屏幕中心double centerX = screenWidth / 2;double centerY = screenHeight / 2;return Container(width: double.infinity,height: double.infinity,color: Colors.grey,child: Stack(children: [Positioned(top: 0,left: 0,child: Container(width: screenWidth,height: noticeHeight,color: Colors.yellow,child: DescText('通知栏高度($noticeHeight)：MediaQuery.of(context).padding.top'),),),Positioned(top: noticeHeight,left: 0,child: Container(width: screenWidth,height: kToolbarHeight,color: Colors.blue,child: const DescText('顶部导航高度($kToolbarHeight)：kToolbarHeight', size: 16),),),Positioned(bottom: 0,left: 0,child: Container(width: screenWidth,height: kBottomNavigationBarHeight,color: Colors.green,child: const DescText('底部导航高度($kBottomNavigationBarHeight)：kBottomNavigationBarHeight', size: 14),),),Positioned(bottom: 80,left: 0,child: Container(width: screenWidth,height: 30,color: const Color.fromRGBO(255, 255, 0, .3),child: DescText('屏幕宽($screenWidth)：MediaQuery.of(context).size.width'),),),Positioned(top: 0,right: 80,child: Container(width: 30,height: screenHeight,color: const Color.fromRGBO(0, 255, 255, .3),child: RotatedBox(quarterTurns: 45,child: DescText('屏幕高($screenHeight)：MediaQuery.of(context).size.height', size: 12),),),),Positioned(top: centerY - 18,left: centerX - 50,child: MaterialButton(onPressed: () => Navigator.pop(context, true),// 返回上一页color: Colors.white,textColor: Colors.blue,minWidth: 100,height: 36,child: const Text('返 回'),),),],),);}
}

Stack布局

SelectWidget组件参考 https://blog.csdn.net/weixin_43526371/article/details/136256386

在这里插入图片描述

import 'package:flutter/material.dart';
import 'package:flutter_app/components/select_widget.dart';class StackPage extends StatefulWidget {const StackPage({super.key});@overrideState<StackPage> createState() => _StackPage();
}class _StackPage extends State<StackPage> {AlignmentDirectional alignmentValue = AlignmentDirectional.topStart;List<SelectOption> alignmentList = [SelectOption(label: 'topStart', value: AlignmentDirectional.topStart),SelectOption(label: 'topCenter', value: AlignmentDirectional.topCenter),SelectOption(label: 'topEnd', value: AlignmentDirectional.topEnd),SelectOption(label: 'centerStart', value: AlignmentDirectional.centerStart),SelectOption(label: 'center', value: AlignmentDirectional.center),SelectOption(label: 'centerEnd', value: AlignmentDirectional.centerEnd),SelectOption(label: 'bottomStart', value: AlignmentDirectional.bottomStart),SelectOption(label: 'bottomCenter', value: AlignmentDirectional.bottomCenter),SelectOption(label: 'bottomEnd', value: AlignmentDirectional.bottomEnd),];TextDirection textDirectionValue = TextDirection.ltr;List<SelectOption> textDirectionList = [SelectOption(label: 'ltr', value: TextDirection.ltr),SelectOption(label: 'rtl', value: TextDirection.rtl),];@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Stack 布局')),body: Scaffold(appBar: PreferredSize(preferredSize: const Size.fromHeight(50),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Expanded(flex: 1,child: SelectWidget(title: 'AlignmentDirectional',options: alignmentList,onChange: (SelectOption selectOption) {setState(() {alignmentValue = selectOption.value as AlignmentDirectional;});},),),Expanded(flex: 1,child: SelectWidget(title: 'TextDirection',options: textDirectionList,onChange: (SelectOption selectOption) {setState(() {textDirectionValue = selectOption.value as TextDirection;});},),),],),),body: Container(width: double.infinity,height: double.infinity,color: Colors.grey,child: Stack(alignment: alignmentValue,textDirection: textDirectionValue,children: [Container(width: 250, height: 250, color: Colors.red),Container(width: 200, height: 200, color: Colors.green),Container(width: 150, height: 150, color: Colors.blue),Container(width: 100, height: 100, color: Colors.black),],),),),);}
}

Positioned布局

在这里插入图片描述

import 'package:flutter/material.dart';class PositionedPage extends StatefulWidget {const PositionedPage({super.key});@overrideState<PositionedPage> createState() => _PositionedPage();
}class _PositionedPage extends State<PositionedPage> {@overrideWidget build(BuildContext context) {// 屏幕宽度double screenWidth = MediaQuery.of(context).size.width;// 屏幕高度double screenHeight = MediaQuery.of(context).size.height;// 通知栏高度double noticeHeight = MediaQuery.of(context).padding.top;// 屏幕中心double centerX = screenWidth / 2;double centerY = (screenHeight - noticeHeight - kToolbarHeight - kBottomNavigationBarHeight) /2;return Scaffold(appBar: AppBar(title: const Text('Positioned 布局')),body: Container(width: double.infinity,height: double.infinity,color: Colors.grey,child: Stack(children: [// 中Positioned(top: centerY - 50,left: centerX - 50,child: Container(width: 100, height: 100, color: Colors.orange),),// 左上Positioned(top: 10,left: 10,child: Container(width: 120,height: 120,color: Colors.red,child: Stack(children: [Positioned(top: 20,left: 20,child: Container(width: 50, height: 50, color: Colors.black)),],),),),// 右上Positioned(top: 10,right: 10,child: Container(width: 120,height: 120,color: Colors.green,child: Stack(children: [Positioned(top: 20,right: 20,child: Container(width: 50, height: 50, color: Colors.blue)),],),),),// 左下Positioned(bottom: 10,left: 10,child: Container(width: 120,height: 120,color: Colors.blue,child: Stack(children: [Positioned(bottom: 20,left: 20,child: Container(width: 50, height: 50, color: Colors.green)),],),),),// 右下Positioned(bottom: 10,right: 10,child: Container(width: 120,height: 120,color: Colors.black,child: Stack(children: [Positioned(bottom: 20,right: 20,child: Container(width: 50, height: 50, color: Colors.red)),],),),),],),),bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(icon: Icon(Icons.home), label: 'HOME'),BottomNavigationBarItem(icon: Icon(Icons.book), label: 'BOOK'),],),);}
}

路由组件

在这里插入图片描述

路由组件

import 'package:flutter/material.dart';
import 'package:flutter_app/views/RowColumnPage.dart';
import 'package:flutter_app/views/StackPage.dart';
import 'package:flutter_app/views/ScreenSizePage.dart';
import 'package:flutter_app/views/PositionedPage.dart';class MenuItem {final String title;final Widget widget;MenuItem({required this.title, required this.widget});
}class RouterWidget extends StatelessWidget {const RouterWidget({super.key});static List<MenuItem> list = <MenuItem>[MenuItem(title: "Row、Column 布局", widget: const RowColumnPage()),MenuItem(title: "Stack 布局", widget: const StackPage()),MenuItem(title: "界面尺寸", widget: const ScreenSizePage()),MenuItem(title: "Positioned 布局", widget: const PositionedPage()),];@overrideWidget build(BuildContext context) {return ListView.separated(itemCount: list.length,separatorBuilder: (BuildContext context, int index) => const Divider(height: 1),itemBuilder: (BuildContext context, int index) {return ListTile(title: Text(list[index].title),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => list[index].widget));},);},);}
}

入口组件

import 'package:flutter/material.dart';
import 'package:flutter_app/components/router_widget.dart';void main() {runApp(const App());
}class App extends StatefulWidget {const App({super.key});@overrideState<App> createState() => _AppState();
}class _AppState extends State<App> {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 移除右上角DEBUG标识home: Scaffold(appBar: AppBar(title: const Text("目录")),body: const RouterWidget(),),);}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/495666.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Rust调用同级目录中的rs文件和调用下级目录中的rs文件

Rust调用同级目录中的rs文件和调用下级目录中的rs文件

一、Rust调用同级目录中的rs文件 Rust新建工程demo02&#xff0c;src文件夹下面新建test.rs文件&#xff0c;这样main.rs文件与它属于同级目录中。 关键点&#xff1a;导入test文件和test文件中的Ellipse模块 mod test;//导入test模块&#xff08;文件&#xff09; use test…
阅读更多...
flutter 加密安全

flutter 加密安全

前言&#xff1a;数据安全 数据的加密解密操作在 日常网络交互中经常会用到&#xff0c;现在密码的安全主要在于 秘钥的安全&#xff0c;如论 DES 3DES AES 还是 RSA, 秘钥的算法&#xff08;计算秘钥不固定&#xff09; 和 保存&#xff0c;都决定了你的数据安全&#xff1b;…
阅读更多...
在CentOS上使用Docker搭建Halo博客并实现远程访问的详细指南

在CentOS上使用Docker搭建Halo博客并实现远程访问的详细指南

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、数据结构 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. Docker部署Halo1.1 检查Docker版本1.2 在Docker中部署Halo 二. Linux安装Cpol…
阅读更多...
C++:list容器(非原生指针迭代器的实现)

C++:list容器(非原生指针迭代器的实现)

本章是STL容器 list 的模拟实现。 之前已经使用 C语言 对带头双向循环链表 进行实现&#xff0c;详见数据结构: 线性表(带头双向循环链表实现), 相较于之前的实现&#xff0c;C 下多了对迭代器以及模板等相关语法特性。下面将着重讲解这些新知识。 文章目录 一. list 的基本框架…
阅读更多...
【JavaEE】_前端POST请求使用json向后端传参

【JavaEE】_前端POST请求使用json向后端传参

目录 1. 关于json 2. 通过Maven仓库&#xff0c;将Jackson下载导入到项目中 3. 使用Jackson 3.1 关于readValue方法 3.2 关于Request.class类对象 3.3 关于request对象的属性类型 3.4 关于writeValueAsString 前端向后端传递参数通常有三种方法&#xff1a; 第一种&…
阅读更多...
学生成绩管理系统

学生成绩管理系统

用单链表数据结构完成c的学生成绩管理系统&#xff0c;此系统的具体功能如下&#xff1a; 本人小萌新一个&#xff0c;遇到BUG是正常现象。并且类与对象写的不太理想。- 写了一个Database存放所有数据&#xff0c;但这肯定浪费资源&#xff0c;你们看着改改吧。 class DataBase…
阅读更多...
【主题广范|见刊快】2024年电力电气与机械，能源工程国际会议（ICPEMEE 2024）

【主题广范|见刊快】2024年电力电气与机械，能源工程国际会议（ICPEMEE 2024）

【主题广范|见刊快】2024年电力电气与机械&#xff0c;能源工程国际会议&#xff08;ICPEMEE 2024&#xff09; 重要信息 会议官网&#xff1a;http://www.icpemee.com会议地址&#xff1a;合肥截稿日期&#xff1a;2024.03.10召开日期&#xff1a;2024.03.20 &#xff08;先投…
阅读更多...
Linux下性能分析的可视化图表工具

Linux下性能分析的可视化图表工具

1 sar 和sadf 1.1 简介 sar命令可以记录系统下的常见活动信息&#xff0c;例如CPU使用率、网络统计数据、Block I/O数据、内存使用情况 等。 sar命令的“-o [file_name]”参数可以将系统活动数据记录到file_name文件&#xff0c;然后通过sadf来解析&#xff0c;sadf命令的“-g…
阅读更多...
Linux中数据库sqlite3的基本命令的使用

Linux中数据库sqlite3的基本命令的使用

数据库概念介绍 数据库安装 首先将本地的三个sqlite3安装包移动到共享文件夹然后在移动到自己创建的文件夹中如下&#xff1a; 然后对安装包进行解压如下&#xff1a;sudo dpkg -i *.deb检查是否安装成功sqlite数据库命令 系统命令 &#xff0c; 都以’.开头 .exit .quit .…
阅读更多...
基于BP神经网络的股票价格预测论文及其Python代码实现

基于BP神经网络的股票价格预测论文及其Python代码实现

代码&#xff1a;github 基于BP神经网络的股票价格预测 通过BP神经网络对明尼亚波利斯春小麦期货的收盘价进行了预测&#xff0c;准确的预测出收盘价的变动。 神经网络中采用优化器ADAM、学习率变化策略Warmup和余弦退化技术&#xff0c;可以有效的解决训练时间太长的的问题。…
阅读更多...
防火墙的内容安全

防火墙的内容安全

目录 1. 内容安全 1.1 IAE引擎 DPI---深度包检测技术 DFI---深度流检测技术 结论(优缺点)&#xff1a; 1.2 入侵防御&#xff08;检测&#xff09;(IPS) IPS的优势: 入侵检测的方法: 入侵检测的流程 签名 查看预定义签名的内容 新建自定义签名 入侵防御的检测…
阅读更多...
[源码分析]webrtc音频流从接收到播放的关键流程

[源码分析]webrtc音频流从接收到播放的关键流程

如图所示&#xff0c;音频流从接收到播放的核心关键流程和执行线程。 neteq中对音频流的RTP数据包进行了处理和解码操作。同时数据出现了跨线程的投递。 后面有空补上核心对象之间的关系图。 后面将添加对neteq模块的细节分析。
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023