Flutter - 基础布局，面试阿里

2023-11-21 22:42:04

       child: item("hello charylin"),
    ),
    Divider(height: 1, color: Colors.black),
  ],
);

}

Widget item(String content) {
return Text(
content,
style: TextStyle(
fontSize: 30,
backgroundColor: Colors.red,
color: Colors.white,
),
);
}
}


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/40f4729a25a24c68be3eb2bfc69b34bf~tplv-k3u1fbpfcp-zoom-1.image)

### 3、Container

`Container` 是 Flutter 中最特殊的 widget, 可以指定尺寸、内外间距、2D 转换等:

*   width: 宽度
*   height: 高度
*   alignment: 子 widget 对齐方式
*   padding: 内间距, EdgeInsetsGeometry 类型, 一般使用子类 EdgeInsets
*   margin: 外间距, EdgeInsetsGeometry 类型, 一般使用子类 EdgeInsets
*   transform: 2D 转换, Matrix4 类型
*   color: 背景色(注意:与 decoration 中的 color 冲突,只能选择一个设置)
*   decoration:BoxDecoration()
    *   color: 背景色
    *   border: 边框样式, BoxBorder 类型, 常用 `Border.all(width: 5)` 来指定
    *   borderRadius: 边框圆角, BorderRadiusGeometry 类型, 常用 `BorderRadius.circular(8)` 来指定
    *   boxShadow:BoxShadow()
        *   color: 阴影颜色
        *   offset: 阴影偏移量
        *   spreadRadius: 延伸，在 offset 的基础上对 x,y 分别增加

class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
// width、height不指定，默认是包裹内容
width: 200,
height: 200,
child: Icon(Icons.pets, size: 50, color: Colors.white),
// 子元素所在位置
alignment: Alignment.topLeft,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
// 旋转5度，缩小一半
transform: Matrix4.rotationZ(degree2Radia(5)).scaled(0.5),
color: Colors.red,
),
Container(
width: 200,
height: 200,
child: Icon(Icons.accessibility, size: 50, color: Colors.white),
// color与decoration冲突，两者只有选择其中一个
// color: Colors.red,
decoration: BoxDecoration(
color: Colors.red, // 背景色
border: Border.all(width: 5, color: Colors.blueAccent), // 边框
borderRadius: BorderRadius.circular(8), // 圆角
boxShadow: [
BoxShadow(
color: Colors.blueGrey, // 阴影颜色
offset: Offset(10, 10), // 阴影偏移量
spreadRadius: 5, // 延伸，相当于offset为 15,15
),
]),
)
],
);
}

double degree2Radia(double degree) {
return degree * pi / 180;
}
}


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b8f1e4378964b99a2ccf0a9fe3dc4bb~tplv-k3u1fbpfcp-zoom-1.image)

二、多子布局 Widget
-------------

多子布局, 顾名思义就是只能包含多个子控件的 widget

### 1、Flex

Flutter 中的 `Flex` 与 css 中的 flex 布局很类似, 可以很灵活的控制内部子 widget 的摆放, 不过一般情况下不会直接使用, 而是使用其子类 `Row` / `Column`:

*   Row/Column 继承自 Flex
*   Row = Flex(direction: Axis.horizontal)
    *   mainAxis(主轴): 水平向右
    *   crossAxis(交叉轴): 竖直向下
*   Column = Flex(direction: Axis.vertical)
    *   mainAxis(主轴): 竖直向下
    *   crossAxis(交叉轴): 水平向右

默认情况下, Row 在水平方向上会尽可能占据比较大的空间, 这是因为其 `mainAxisSize` 属性默认为 `MainAxisSize.max` 导致:

> Column 与 Row 除了方向不同, 其它基本一致, 故掌握 Row 的情况后, Column 自然也会掌握

class ButtonRowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
/// Row特点:
/// - 水平方向尽可能占据比较大的空间
/// * 如果水平方向希望包裹内容,可以设置 mainAxisSize = min
/// - 垂直方向包裹内容
return Column(
children: [
RaisedButton(
child: Row(
children: [Icon(Icons.bug_report), Text(“bug报告(MainAxisSize.max)”)],
),
onPressed: () {},
),
RaisedButton(
child: Row(
mainAxisSize: MainAxisSize.min, // 包裹内容。包裹是max占满父widget
children: [Icon(Icons.bug_report), Text(“bug报告(MainAxisSize.min)”)],
),
onPressed: () {},
),
],
);
}
}


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/535572c1e1b3476d8839307edc5ce282~tplv-k3u1fbpfcp-zoom-1.image)

### 2、Row

Row 比较重点的是主轴及交叉轴的对齐:

*   MainAxisAlignment:
    *   start: 主轴的开始位置挨个摆放元素
    *   end: 主轴的结束位置挨个摆放元素
    *   center: 主轴的中心点对齐
    *   spaceBetween: 左右两边的间距为 0，其它元素之间平分间距
    *   spaceAround: 左右两边的间距是其它元素之间的间距的一半
    *   spaceEvenly: 所有的间距平分空间
*   CrossAxisAlignment:
    *   start: 交叉轴的起始位置对齐
    *   end: 交叉轴的结束位置对齐
    *   center: 中心点对齐(默认值)
    *   baseline: 基线对齐(必须有文本的时候才起效果)
        *   使用 baseline 对齐必须指定 textBaseline, 否则会报错.
    *   stretch: 先让 Row 占据交叉轴尽可能大的空间, 将所有子 widget 交叉轴的高度, 拉伸到最大

class RowDemo1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
itemRow(“start”, MainAxisAlignment.start, “center”, CrossAxisAlignment.center),
itemRow(“end”, MainAxisAlignment.end, “center”, CrossAxisAlignment.center),
itemRow(“center”, MainAxisAlignment.center, “center”, CrossAxisAlignment.center),
itemRow(“spaceBetween”, MainAxisAlignment.spaceBetween, “center”, CrossAxisAlignment.center),
itemRow(“spaceAround”, MainAxisAlignment.spaceAround, “center”, CrossAxisAlignment.center),
itemRow(“spaceEvenly”, MainAxisAlignment.spaceEvenly, “center”, CrossAxisAlignment.center),
],
);
}

Widget itemRow(
String mainAxisAlignmentStr,
MainAxisAlignment mainAxisAlignment,
String crossAxisAlignmentStr,
CrossAxisAlignment crossAxisAlignment) {
return Container(
height: 120,
margin: const EdgeInsets.only(bottom: 8.0),
color: Colors.pink[100],
child: Stack(
fit: StackFit.expand,
children: [
Row(
mainAxisAlignment: mainAxisAlignment,
crossAxisAlignment: crossAxisAlignment,
// textDirection: TextDirection.ltr, // rtl: 从右到左排版; ltr: 从左到右排版(默认)
children: [
Container(width: 80, height: 60, color: Colors.red),
Container(width: 120, height: 100, color: Colors.green),
Container(width: 90, height: 80, color: Colors.blue),
Container(width: 50, height: 120, color: Colors.orange),
],
),
Positioned(
left: 0,
bottom: 0,
child: Text(
“GitLqr >>> main: m a i n A x i s A l i g n m e n t S t r , c r o s s : mainAxisAlignmentStr , cross: mainAxisAlignmentStr,cross:crossAxisAlignmentStr”,
style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
),
)
],
),
);
}
}


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe52ca07e58a4ebfb88aaff82f8ede37~tplv-k3u1fbpfcp-zoom-1.image)

class RowDemo2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 基线对齐
return Column(
children: [
itemRow(“spaceEvenly”, MainAxisAlignment.spaceEvenly, “start”, CrossAxisAlignment.start),
itemRow(“spaceEvenly”, MainAxisAlignment.spaceEvenly, “center”, CrossAxisAlignment.center),
itemRow(“spaceEvenly”, MainAxisAlignment.spaceEvenly, “end”, CrossAxisAlignment.end),
itemRow(“spaceEvenly”, MainAxisAlignment.spaceEvenly, “stretch”, CrossAxisAlignment.stretch),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.baseline,
// alphabetic 与 ideographic 这2种基线几乎没差
textBaseline: TextBaseline.ideographic,
children: [
Container(width: 80,height: 60, color: Colors.red, child: Text(“Hellxo”, style: TextStyle(fontSize: 20))),
Container(width: 120, height: 100, color: Colors.green, child: Text(“Woxrld”, style: TextStyle(fontSize: 30)),),
Container(width: 90, height: 80, color: Colors.blue, child: Text(“abxc”, style: TextStyle(fontSize: 12))),
Container(width: 50, height: 120, color: Colors.orange, child: Text(“cxba”, style: TextStyle(fontSize: 40))),
],
),
],
);
}

Widget itemRow(
String mainAxisAlignmentStr,
MainAxisAlignment mainAxisAlignment,
String crossAxisAlignmentStr,
CrossAxisAlignment crossAxisAlignment) {
return Container(
height: 140,
margin: const EdgeInsets.only(bottom: 8.0),
color: Colors.pink[100],
child: Stack(
fit: StackFit.expand,
children: [
Row(
mainAxisAlignment: mainAxisAlignment,
crossAxisAlignment: crossAxisAlignment,
// textDirection: TextDirection.ltr, // rtl: 从右到左排版; ltr: 从左到右排版(默认)
children: [
Container(width: 80, height: 60, color: Colors.red),
Container(width: 120, height: 100, color: Colors.green),
Container(width: 90, height: 80, color: Colors.blue),
Container(width: 50, height: 120, color: Colors.orange),
],
),
Positioned(
left: 0,
bottom: 0,
child: Text(
“GitLqr >>> main: m a i n A x i s A l i g n m e n t S t r , c r o s s : mainAxisAlignmentStr , cross: mainAxisAlignmentStr,cross:crossAxisAlignmentStr”,
style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
),
)
],
),
);
}
}


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b18efa85b986471683dd88f3f4010c9a~tplv-k3u1fbpfcp-zoom-1.image)

> 最后一组是 `CrossAxisAlignment.baseline` 的效果, 可以看到不管文字多大, 字母 `x` 的底部都是在一条线上的, 这就是基线对齐.  
> 值得注意的是, 使用 `CrossAxisAlignment.baseline` 必须同时指定基线 `textBaseline(默认值为null)`, 其值 `TextBaseline.ideographic` 与 `TextBaseline.alphabetic` 几乎没差

### 3、Column

Column 与 Row 都是继承自 Flex, 两者除了在方向上有区别外, 其他特性几乎完全一样, 这里只补充一点它们排版方向上的不同之处:

*   Row: 排版方向 TextDirection
    *   rtl: 从右到左排版
    *   ltr: 从左到右排版(默认)
*   Column: 排版方向 VerticalDirection
    *   up: 从下到上排版
    *   down: 从上到下排版(默认)

class ColumnDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
verticalDirection: VerticalDirection.down,
// up: 从下到上排版; down: 从上到下排版(默认)
children: [
Container(width: 80, height: 60, color: Colors.red),
Container(width: 120, height: 100, color: Colors.green),
Container(width: 90, height: 80, color: Colors.blue),
Container(width: 50, height: 120, color: Colors.orange),
Text(
“GitLqr >>> VerticalDirection.down”,
style: TextStyle(fontSize: 20, backgroundColor: Colors.black54, color: Colors.white),
),
],

上一篇：一文告诉你，国密SM2算法有多优秀


下一篇：fatal: unable to access 'https://github.com/XXXX.git/': OpenSSL SSL_connect: SSL_ERROR_SYS