Flutter组件使用技巧(二)

山水有轻音 2023-01-02 PM 351℃ 0条

一、padding

使用padding包裹控件,内边距,即本Widget边框和内容区之间距离

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例:4个方向各添加16像素补白
padding: EdgeInsets.all(16.0)

// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例:
padding: const EdgeInsets.fromLTRB(10,20,30,40)

// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例:在左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),

// 4. 设置对称方向的填充
// vertical:针对垂直方向top、bottom
// horizontal:针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例:垂直方向上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0)

例子如下

Padding(
   padding: const EdgeInsets.all(20),//统一设置四边距离
   child: Text('content')
)

Padding(
   padding: const EdgeInsets.only(left,top,right,bottom),//分开设置四边距离
   child: Text('content')
)
//使用Container包裹控件
Container(
  padding: const EdgeInsets.all(30),
  margin: const EdgeInsets.all(20),
  child:Text('content')
)
//使用SizedBox填充的方式增加距离
 Column(
     child:[
         Text('我是第一行'),
         SizedBox(height:20,with:40),//分割控件填充
         Text('我是第二行行'),
         SizedBox(height:20,with:40),//分割控件填充
     ]
 )

二、margin

margin,外边距,即本Widget与父边框的距离

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例:4个方向各添加16像素补白
margin: EdgeInsets.all(16.0)

// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例:
margin:const EdgeInsets.fromLTRB(10,20,30,40)

// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例:在左边添加8像素补白
margin:const EdgeInsets.only(left: 8.0),

// 4. 设置对称方向的填充
// vertical:针对垂直方向top、bottom
// horizontal:针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例:垂直方向上下各添加8像素补白
margin:const EdgeInsets.symmetric(vertical: 8.0)

三、alignment

子Widget对齐,生效范围:父Widget尺寸 > child Widget尺寸

// 居中 & 各方向对齐
center
centerLeft
centerRight

// 底部对齐 & 各方向对齐
bottomCenter
bottomLeft
bottomRight

// 顶部对齐 & 各方向对齐
topCenter
topLeft
topRight

// 示例
alignment:Alignment.center

四、Row和Column

Row:在水平方向上排列子widget的列表,属于多子元素容器。  
Column:在垂直方向上排列子widget的列表,属于多子元素容器。  
他们的父类都是Flex组件,根据Flex设置方向为水平或者垂直,就有了Row和Column。  
注意:这两个组件自身不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。可以在外层套一个SingleChildScrollView之类的组件使它们可以滚动。
属性
1.  direction  
    设置主轴方向,可设置的值为 Axis.horizontal 和 Axis.vertical,交叉轴与主轴方向垂直。
2.  mainAxisAlignment  
    设置子 Widget 沿着主轴方向的排列方式,默认 MainAxisAlignment.start,可设置的方式如下:

-   MainAxisAlignment.start:左对齐,默认值;
-   MainAxisAlignment.end:右对齐;
-   MainAxisAlignment.center:居中对齐;
-   MainAxisAlignment.spaceBetween:两端对齐;
-   MainAxisAlignment.spaceAround:每个 Widget 两侧的间隔相等,与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
-   MainAxisAlignment.spaceEvenly:平均分布各个 Widget,与屏幕边缘的间隔与其他 Widget 之间的间隔相等;  
3.  mainAxisSize  
    设置主轴的大小,默认 MainAxisSize.max,可设置的值如下:

-   MainAxisSize.max:主轴的大小是父容器的大小;
-   MainAxisSize.min:主轴的大小是其子 Widget 大小之和;
4.  crossAxisAlignment  
    设置子 Widget 沿着交叉轴方向的排列方式,默认 CrossAxisAlignment.center,可设置的方式如下:

-   CrossAxisAlignment.start:与交叉轴的起始位置对齐;
-   CrossAxisAlignment.end:与交叉轴的结束位置对齐;
-   CrossAxisAlignment.center:居中对齐;
-   CrossAxisAlignment.stretch:填充整个交叉轴;
-   CrossAxisAlignment.baseline:按照基线对齐;
5.  textDirection  
    决定水平方向上的摆放顺序,设置方式如下:

-   TextDirection.ltr:从左到右摆放
-   TextDirection.rtl:从右到左摆放

6.  verticalDirection  
    设置垂直方向上的子 Widget 的排列顺序,默认为 VerticalDirection.down,设置方式如下:

-   VerticalDirection.down:start 在顶部,end 在底部;
-   VerticalDirection.up:start 在底部,end 在顶部。

7.  textBaseline  
    设置文字对齐的基线类型,可设置的值如下:

-   TextBaseline.alphabetic:与字母基线对齐;
-   TextBaseline.ideographic:与表意字符基线对齐;  
    使用时当 crossAxisAlignment 设置为 baseline 时,必须设置 textBaseline 属性的值

8.  clipBehavior  
    当子组件超出容器时的裁剪行为,设置方式如下:

-   Clip.none:不裁剪
-   Clip.hardEdge:裁剪
-   Clip.antiAlias:裁剪,抗锯齿
-   Clip.antiAliasWithSaveLayer:裁剪,抗锯齿

五、Spacer

Spacer 用来调节 Widget 之间的间距,其本质也是build了一个Expanded组件。会占据所有的剩余空间,因此 MainAxisAlignment 的设置将无效,Spacer 的属性 flex 用于设置剩余空间的分配权重,默认值为 1,表示占据所有剩余空间,如果两个以上 Spacer 则按照 flex 分配剩余空间

示例如下
Row(
    children: <Widget>[
      Container(
        width: 80,
        height: 80,
        color: Colors.red,
      ),
      const Spacer(
        flex: 1,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
      const Spacer(
        flex: 2,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.yellow,
      ),
    ],
  );
标签: Flutter

非特殊说明,本博所有文章均为博主原创。

上一篇 js常用技术汇总
下一篇 没有了

评论啦~