zoukankan      html  css  js  c++  java
  • 定位布局 Stack 层叠组件 Stack 与 Align Stack 与 Positioned 实现

    一、Flutter Stack 组件
    Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局
    alignment  配置所有子元素的显示位置
    children 子组件
     
    二、Flutter Stack Align
    Stack 组件中结合 Align 组件可以控制每个子元素的显示位置
    alignment  配置所有子元素的显示位置
    child  子组件
     
    三、Flutter Stack Positioned
    Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置
    top  子元素距离顶部的距离
    bottom  子元素距离底部的距离
    left  子元素距离左侧距离
    right  子元素距离右侧距离
    child  子组件 
     
    案例
     
    Positioned定位
      return Container(
       200,
    height: 200,
    decoration: BoxDecoration(
    color: Colors.red
    ),
    child:
    Stack(
      alignment:Alignment.center ,
    fit: StackFit.expand,
    children: <Widget>[
    Text('123', style: TextStyle(fontSize: Screen.width(32)),),
    Positioned(
    right: 10,
    child: Text('设置', style: TextStyle(fontSize: Screen.width(32)),),
    ),
    ],
    ),
    );

    Align定位
    return Container(
    200,
    height: 200,
    decoration: BoxDecoration(
    color: Colors.red
    ),
    child: Stack(
    children: <Widget>[
    Align(alignment: Alignment.center, child: Icon(Icons.print),),
    Align(alignment: Alignment.bottomLeft, child: Icon(Icons.map),),
    Align(alignment: Alignment.bottomRight, child: Icon(Icons.search),),
    ],
    )
    );
     
  • 相关阅读:
    查找表类算法//字母异位词分组
    查找表类算法//四数相加 II
    查找表类算法//四数相加 II
    第六章 类文件结构
    第六章 类文件结构
    查找表的算法//四数之和
    查找表的算法//四数之和
    第五章 调优案例分析与实战
    第五章 调优案例分析与实战
    C++_基础4-分支语句和逻辑运算符
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12335208.html
Copyright © 2011-2022 走看看