首页 > 其他分享 >Flutter Stack 做页面切换

Flutter Stack 做页面切换

时间:2023-11-03 15:23:36浏览次数:40  
标签:index color rightMenu Stack Colors height Flutter 页面

从名字上看,这个容器就是堆。
效果是能让自己内部的子组件重叠放置,严格意义上来说,我认为他可以算是一个布局容器,就像Row,Column一样。
下面是网上找的例子(主要我懒的现写了)

class CustomStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var yellowBox = Container(
      color: Colors.yellow,
      height: 100,
      width: 100,
    );

    var redBox = Container(
      color: Colors.red,
      height: 90,
      width: 90,
    );

    var greenBox = Container(
      color: Colors.green,
      height: 80,
      width: 80,
    );

    return Container(
      width: 200,
      height: 120,
      color: Colors.grey.withAlpha(33),
      child: Stack(
        textDirection: TextDirection.rtl,
        fit: StackFit.loose,
        alignment: Alignment.topRight,
        children: <Widget>[yellowBox, redBox, greenBox],
      ),
    );
  }
}

实际效果就是三块颜色跌在一起,像下面这样。
image

它有下面这些常用属性
● Alignment
● Positioned 这个好像算是组件,目前我还没用过
● clipBehavior 如果设置为None,可以不剪切超过边界的部分
● Align 和上面的Alignment看起来功能重复,但看人家的示例好像有不一样的地方

当然我不是为了抄人家的说明,而是要记录我的用法。
目标:实现点击不同的选项,切换不同的页面来显示。
我采用了IndexedStack来做, 这样在点了按钮之后,就会修改_index, 然后重画不同的page

List<Widget> _UserManageChildPages = [
  UserPage(),
  IdentityPage(),
  AuthorityPage(),
];

child: IndexedStack(
  index: _index,
  children: _UserManageChildPages,
),

child: ElevatedButton(
  onPressed: () {
    setState(() {
      _index = 1;
    });
  },
  child: Text('Identity')
),

今天还看到了一种做法,直接使用Stack

int rightMenu = 1;

Stack(
  alignment: AlignmentDirectional.center,
  children: <Widget>[
  rightMenu==1?UserPage():rightMenu==2?IdentityPage():rightMenu==3?AuthorityPage(),
)

看起来一样可以达到效果。
不过不知道是不是因为我自己找的方法,个人更倾向用前面这种。

标签:index,color,rightMenu,Stack,Colors,height,Flutter,页面
From: https://www.cnblogs.com/PopFish/p/17807645.html

相关文章

  • 关于在页面列表里查询数据的时间和页面实时弹窗中的时间差1秒钟的问题
    1、问题:在一次告警中心功能的演示时,告警列表页中的实时告警数据,每次都跟弹窗的告警提示信息查一秒,有时候有事正常的,就很奇怪。2、解决:经过进行代码断点,发现在插入告警时间时,使用的LocalDateTime,该时间时带有纳秒时间的,比如在程序中显示的时间值是:1990-01-01T00:01:01.111,此时存......
  • 飞码LowCode前端技术:如何便捷配置出页面 | 京东云技术团队
    简介飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据、事件、业务支持三个方面进行分析,第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析,第三部分从监控、页面配置、页......
  • vue3 -点击按钮进入新的页面
    一、调用页面//路由import{useRouter}from'vue-routerlet$router=useRouter()//车组调整页面consthandleCar=(row:any)=>{ $router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})}二、新打开的页面importuseTagsViewSt......
  • flutter开发体验
    flutter介绍flutter是一种跨平台UI开发框架。这方面类似框架有:weex:Weex是一个可以使用现代化的Web技术开发高性能原生应用的框架。ReactNative:ReactNative将React的声明性UI框架引入iOS和Android。flutter与WeeX和ReactNative又有很大不同。WeeX和ReactNative是基......
  • flutter driver 集成测试
    最近一直断断续续的学习flutter,今天跟大家介绍一下flutterdriver测试。flutter测试基础Flutter的测试遵循Android的测试规范进行了分层。单元测试:测试单一功能、方法或类。例如,被测单元的外部依赖性通常被模拟出来,如package:mockito。widget测试:(在其它UI框架称为组件测试)测试......
  • piti:PPT页面的神奇小插件
    piti####这是一个拥有2000+PPT页面的神器小插件。划重点:免费使用。我第一次知道piti是朋友推荐的,后来才知道原来这是一周进步推出的小插件。“让PPT好看这件事情,交给我们”,这样的slogan真是非常打动人心啊~这是piti的界面,非常简洁。如果你和我一样是个偷懒星人,那piti的PPT智......
  • Springboot使用return跳转到html页面只是返回字符串,不跳转问题的解决
    问题描述我在使用SpringBoot进行页面跳转时,发现其只是返回相应的字符串,并不会出现页面跳转:问题解决不要在Controller层加@Responsebody注解,不然就只会默认是返回字符串,而不会返回页面;......
  • 即构音视频 Express Flutter SDK 全面支持空安全
    Flutter是一套移动UI框架,可以快速在iOS、Android上构建高质量的原生用户界面。作为其官方语言Dart是类型安全的,当开发者获取变量的时候,编译器可以保证变量的类型,但类型安全并不保证获取的变量不是null。在GitHub上有非常多因为null导致Dart代码出现异常的issue,为了从......
  • flutter组件之GridView.builder()
    如果您的Flutter应用程序需要显示大量或无限数量项目的网格视图(例如,从API获取的产品列表),那么您应该使用GridView.builder()而不是GridView()。该**生成器()**只为那些确实可见,所以您的应用程序的性能将得到改善例子步骤:生成一个包含100.000个虚拟产品的列表:finalList<Map>myP......
  • 分享一个HTML页面适配方式:用户手动缩放
    <metaname="viewport"content="width=device-width,initial-scale=1.0">这个配置告诉浏览器自动将页面的宽度设置为设备的宽度(通常是屏幕宽度),并将初始缩放比例设置为1.0。这通常用于确保网页在移动设备上以完整的屏幕宽度显示,而不需要用户手动缩放或调整。<metaname="viewpo......