「 Ace浅末」 ✨

1️⃣ Dev

搭建开发环境大概只需要安装好 Flutter 的 SDK 即可

https://docs.flutter.dev/get-started/install

对于开发Apple系的APP，则还需要安装 XCode（Mac 必装 🫠

其次是IDE的选择，首选万能的VSCode，IDEA需要安装 Flutter & Dart 插件（虽然我用的 IDEA

2️⃣ 关于 Flutter 中的 Flex

这里和HTML有一些区别

3️⃣ 关于CSS属性在Flutter中的平替 & End

可以参考该文档

https://flutter.cn/docs/get-started/flutter-for/web-devs

属性名大部分都是重复的，有前端开发的基础应该很容易就上手了，比较重要的感觉在各类组件的使用上，Flutter中组件都有其对应的用途，且属性是固定的（CSS样式能够随便造，只需要给 Dom元素指定想要的 Class 就行了）

所以说，看不看上面的文档都无所谓 😎

4️⃣ 关于 Flutter 组件

常用的大概会是这些

Container

差不多就是 Flutter 中的 DIV

FractionallySizedBox

用途：设置子元素相对父元素的宽 / 高

## Flutter
FractionallySizedBox(
   heightFactor: .8,
   child: Container(
      width: 200,
      color: Colors.red,
      padding: const EdgeInsets.all(10.0)
   )
)

## CSS
height: 80%

Flex

Flex布局没啥好说的 👏

## Flutter
Flex(
   direction: Axis.horizontal,
   mainAxisAlignment: MainAxisAlignment.start
)

## CSS
display: flex;
flex-direction: row;

Align

用途：设置内容相对于容器的位置

Align(
    alignment: Alignment.topLeft
)

Row

用途：子元素横向排列

Row(
  children: []
)

Column

用途：子元素纵向排列

Column(
     children: []
)

Image

用途：引入图片（支持本地图片，网络图片，具体可以查看 Image 中的源代码

Image.asset(
    'images/WechatIMG66.jpeg',
    height: 100,
    width: 100,
    fit: BoxFit.cover,
)

ClipRRect

用途：内容裁剪

这里也可以用 Container 的 `clipBehavior: Clip.hardEdge` 来实现，不过效果不如 ClipRRect

## Flutter
ClipRRect(
    borderRadius: BorderRadius.circular(
         _isHovered ? 10.0 : 20.0),
    child: Image.asset(
        'images/WechatIMG66.jpeg',
        height: 100,
        width: 100,
        fit: BoxFit.cover,
    )
)

## CSS
div {
    border-radius: 10px;
    overflow: hidden;
}

Expanded

用途：显而易见，看代码吧 🤫

Flex(
   direction: Axis.horizontal,
   mainAxisAlignment: MainAxisAlignment.start,
   children: <Widget>[
      Expanded(
         flex: 1
      ),
      Expanded(
         flex: 2
      ),
   ]
)

AceXiamo