devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

（七）Flutter 布局 创建小部件 自定义view 关于布局的一些属性 mainAxis SizeBox Alignment stack AspectRatio ConstrainedBox_flutter crossaxisalignment 自定义

作者：我家小花儿 | 2024-03-22 17:26:55

赞

踩

flutter crossaxisalignment 自定义

主要内容

  • 创建LayoutDemo小部件
  • 创建可配置图标徽章IconBadege 小部件
  • Row与Column
  • mainAxis:主轴与crossAxis 交叉轴
  • SizeBox 固定尺寸的盒子
  • Alignment 对齐
  • stack 一摞小部件
  • AspectRatio 宽高比
  • ConstrainedBox 带限制的盒子 

 

关于前两个就不多做说明 又java基础的就能看懂 没有java基础的我讲了你也不懂 所以我就直接上代码了

flutter 的Row 和Column

就相当于

android 的orientation 属性 的horizontal 一行 与 vertical 一列

 

mainAxisAlignment 主轴的对齐方式 

这个主轴 是相对于Cloumn 或者Row来说的

在Cloumn中  那么主轴就是垂直 

在row 中   那么主轴就是水平

默认值是start

  1.   mainAxisAlignment: MainAxisAlignment.start,
  2.   mainAxisAlignment: MainAxisAlignment.end,
  3.   mainAxisAlignment: MainAxisAlignment.center,
  4. //把空间分配的小控件的周围
  5.   mainAxisAlignment: MainAxisAlignment.spaceAround,
  6. //把空间分配的小控件的之间
  7.   mainAxisAlignment: MainAxisAlignment.spaceBetween,
  8. //把空间平均分配的小控件的之间
  9.   mainAxisAlignment: MainAxisAlignment.spaceEvenly,

就是靠前显示

 

crossAxisAlignment 交叉轴的对齐方式

这个交叉轴 是相对于主轴的交叉出现的 他们有很多数值 

在Cloumn中 因为主轴就是垂直  那么交叉轴就是水平

在row 中   因为主轴就是水平 那么交叉轴就是垂直

默认值是

crossAxisAlignment: CrossAxisAlignment.center,

还有其他属性

  1. //拉伸
  2.  crossAxisAlignment: CrossAxisAlignment.stretch,

start end就不多讲了

上案列  自定义Icon控件 并传入大小

  1. import 'package:flutter/material.dart';
  2. class LayoutDemo extends StatelessWidget{
  3.   @override
  4.     Widget build(BuildContext context) {
  5.  
  6.       return Container(
  7.         child: Column(
  8.           mainAxisAlignment: MainAxisAlignment.start,
  9.           crossAxisAlignment: CrossAxisAlignment.stretch,
  10.           children: <Widget>[
  11.             IconBadge(Icons.pool),
  12.             IconBadge(Icons.beach_access,size: 64.0,), 
  13.             IconBadge(Icons.airplanemode_active),
  14.           ],
  15.           
  16.         )
  17.       );
  18.     }
  19. }
  20. class IconBadge extends StatelessWidget{
  21.   final IconData icon;
  22.   final double size;
  23.   IconBadge(this.icon,{this.size=32.0});
  24.  
  25.  
  26.   @override
  27.   Widget build(BuildContext context) {
  28.     // TODO: implement build
  29.     return Container(
  30.       child: Icon(icon,size:size,color: Colors.white),
  31.       width: size+60,
  32.       height: size+60,
  33.       color: Color.fromRGBO(3, 54, 255, 1.0),
  34.     );
  35.   }
  36.  
  37. }

sizedBox 这个不仅仅可以设置空间的大小 还可以用来巧妙的设置成间距

  1.  return Container(
  2.         child: Column(
  3.           mainAxisAlignment: MainAxisAlignment.center,
  4.  
  5.           children: <Widget>[
  6.           SizedBox(
  7.             width: 200.0,
  8.             height: 300.0,
  9.             child: Container(
  10.               decoration: BoxDecoration(
  11.                 color: Color.fromRGBO(3, 54, 255, 1.0),
  12.                 borderRadius: BorderRadius.circular(8.0),
  13.               ),
  14.             child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
  15.             ),
  16.           ),
  17.           SizedBox(
  18.             height:20.0
  19.           ),
  20.            SizedBox(
  21.             width: 100.0,
  22.             height: 100.0,
  23.             child: Container(
  24.               decoration: BoxDecoration(
  25.                 color: Color.fromRGBO(3, 54, 255, 1.0),
  26.                 borderRadius: BorderRadius.circular(8.0),
  27.               ),
  28.             child: Icon(Icons.brightness_2,color: Colors.white,size: 32.0,),
  29.             ),
  30.           )
  31.           ],
  32.           
  33.         )
  34.       );

alignment 对齐

语法

alignment: Alignment(1.0, 1.0),

取值范围 -1~1

具体应用 就是相当于Android 相对布局中的AliginParent属性

  1. 对于控件的 android:layout_alignParent 属性，只有在该布局的父布局也是RelativeLayout是才有用，此属性的含义为将控件边缘与父控件的边缘对齐
  2.  
  3. android:layout_alignParentLeft="true"  --将控件的左边缘和父控件的左边缘对齐
  4. android:layout_alignParentTop="true"  --将控件的上边缘和父控件的上边缘对齐
  5. android:layout_alignParentRight="true"  --将控件的右边缘和父控件的右边缘对齐
  6. android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐
  7.  
  8. android:layout_centerInParent="true"  --将控件置于父控件的中心位置
  9. android:layout_centerHorizontal="true"  --将控件置于水平方向的中心位置
  10. android:layout_centerVertical="true"  --将控件置于垂直方向的中心位置

默认的位置就是0，0

实际应用如下 可以理解为child再SizeBox中的位置 左上是-1，-1 右下是1，1

这个样子的设计我还觉得挺新颖的

  1.  SizedBox(
  2.             width: 200.0,
  3.             height: 300.0,
  4.             child: Container(
  5.               alignment: Alignment(0.0, 0.0),
  6.               decoration: BoxDecoration(
  7.                 color: Color.fromRGBO(3, 54, 255, 1.0),
  8.                 borderRadius: BorderRadius.circular(8.0),
  9.               ),
  10.             child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
  11.             ),
  12.           ),

当然 Flutter作为后起之秀不是没有原因的，真的是细节做的很好 他为了少让你自己算0，-0.5  还是 -0.5 0，量身定制了api

  alignment: Alignment.topCenter,

我就不一一列举了 自己尝试把

Stack 相当于Android的相对布局

把一堆小空间叠加起来 直接上代码吧

  1. import 'package:flutter/material.dart';
  2. class LayoutDemo extends StatelessWidget{
  3.   @override
  4.     Widget build(BuildContext context) {
  5.  
  6.       return Container(
  7.         child: Column(
  8.           mainAxisAlignment: MainAxisAlignment.center,
  9.  
  10.           children: <Widget>[
  11.           Stack(children: <Widget>[
  12.             SizedBox(
  13.             width: 200.0,
  14.             height: 300.0,
  15.             child: Container(
  16.               alignment: Alignment.topCenter,
  17.               decoration: BoxDecoration(
  18.                 color: Color.fromRGBO(3, 54, 255, 1.0),
  19.                 borderRadius: BorderRadius.circular(8.0),
  20.               ),
  21.             child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
  22.             ),
  23.           ),
  24.           SizedBox(
  25.             height:20.0
  26.           ),
  27.            SizedBox(
  28.             width: 100.0,
  29.             height: 100.0,
  30.             child: Container(
  31.               decoration: BoxDecoration(
  32.                 color: Color.fromRGBO(3, 54, 255, 1.0),
  33.                 borderRadius: BorderRadius.circular(8.0),
  34.               ),
  35.             child: Icon(Icons.brightness_2,color: Colors.white,size: 32.0,),
  36.             ),
  37.           )
  38.           ],)
  39.           ],
  40.           
  41.         )
  42.       );
  43.     }
  44. }
  45. class IconBadge extends StatelessWidget{
  46.   final IconData icon;
  47.   final double size;
  48.   IconBadge(this.icon,{this.size=32.0});
  49.  
  50.  
  51.   @override
  52.   Widget build(BuildContext context) {
  53.     // TODO: implement build
  54.     return Container(
  55.       child: Icon(icon,size:size,color: Colors.white),
  56.       width: size+60,
  57.       height: size+60,
  58.       color: Color.fromRGBO(3, 54, 255, 1.0),
  59.     );
  60.   }
  61.  
  62. }

Positioned 控制控件的位置

  1.    Positioned(
  2.             right: 20.0,
  3.             top: 120.0,
  4.               child: Icon(Icons.ac_unit,color: Colors.white,size: 16.0,),)
  5.           ],)

so 画一个星空图 有月亮还有星辰 

  1. import 'package:flutter/material.dart';
  2.  
  3. class LayoutDemo extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Container(
  7.         child: Column(
  8.       mainAxisAlignment: MainAxisAlignment.center,
  9.       children: <Widget>[
  10.         Stack(
  11.           alignment: Alignment.topLeft,
  12.           children: <Widget>[
  13.             SizedBox(
  14.               width: 200.0,
  15.               height: 300.0,
  16.               child: Container(
  17.                 alignment: Alignment.topCenter,
  18.                 decoration: BoxDecoration(
  19.                   color: Color.fromRGBO(3, 54, 255, 1.0),
  20.                   borderRadius: BorderRadius.circular(8.0),
  21.                 ),
  22.               ),
  23.             ),
  24.             SizedBox(height: 20.0),
  25.             SizedBox(
  26.               
  27.               width: 100.0,
  28.               height: 100.0,
  29.               child: Container(
  30.                 decoration: BoxDecoration(
  31.                     color: Color.fromRGBO(3, 54, 255, 1.0),
  32.                     shape: BoxShape.circle,
  33.                     gradient: RadialGradient(colors: [
  34.                       Color.fromRGBO(7, 102, 255, 1.0),
  35.                       Color.fromRGBO(3, 54, 255, 1.0),
  36.                     ])),
  37.                 child: Icon(
  38.                   Icons.brightness_2,
  39.                   color: Colors.white,
  40.                   size: 32.0,
  41.                 ),
  42.               ),
  43.             ),
  44.             Positioned(
  45.                 right: 20.0,
  46.                 top: 120.0,
  47.                 child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0)
  48.                 ),
  49.             Positioned(
  50.                 right: 70.0,
  51.                 top: 180.0,
  52.                 child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0)
  53.                 ),
  54.             Positioned(
  55.                 right: 30.0,
  56.                 top: 230.0,
  57.                 child: Icon(Icons.ac_unit, color: Colors.white, size: 18.0)
  58.                 ),
  59.             Positioned(
  60.                 right: 90.0,
  61.                 top: 20.0,
  62.                 child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0)
  63.                 ),
  64.             Positioned(
  65.                 right: 4.0,
  66.                 top: -4.0,
  67.                 child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0)
  68.                 ),
  69.           ],
  70.         )
  71.       ],
  72.     ));
  73.   }
  74. }
  75.  
  76. class IconBadge extends StatelessWidget {
  77.   final IconData icon;
  78.   final double size;
  79.   IconBadge(this.icon, {this.size = 32.0});
  80.  
  81.   @override
  82.   Widget build(BuildContext context) {
  83.     // TODO: implement build
  84.     return Container(
  85.       child: Icon(icon, size: size, color: Colors.white),
  86.       width: size + 60,
  87.       height: size + 60,
  88.       color: Color.fromRGBO(3, 54, 255, 1.0),
  89.     );
  90.   }
  91. }

AspectRatio 来制造宽高比的容器

  1. class LayoutDemo extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Container(
  5.         child: Column(
  6.       mainAxisAlignment: MainAxisAlignment.center,
  7.       children: <Widget>[
  8.         AspectRatio(
  9.           aspectRatio:1.0/1.0 ,
  10.           child: Container(
  11.             color: Color.fromRGBO(3, 54, 255, 1.0),
  12.           ),
  13.         ),
  14.       ],
  15.      
  16.  
  17.     )
  18.     );
  19.   }
  20. }

其中 aspectRatio:1.0/1.0 ,

就是说1比上1  也可以改成16/9  3/2等值进行测试

 

ConstrainedBox 带限制的盒子

可以设置最小高度和最大高度等参数

  1. class LayoutDemo extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return Container(
  5.         child: Column(
  6.       mainAxisAlignment: MainAxisAlignment.center,
  7.       children: <Widget>[ConstrainedBox(
  8.         constraints: BoxConstraints(
  9.           minHeight: 200.0,
  10.           maxWidth: 200.0
  11.         ),
  12.         child: Container(
  13.           color: Color.fromRGBO(3, 54, 255, 1.0),
  14.         ),
  15.       )],
  16.     ));
  17.   }
  18. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/289744
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号