技巧，不常用组件。

Flutter 技巧。

1. 左右按比例显示，Row(Expanded(flex:4), Expanded(flex:1));

2. 使用这个组件，使得组件撑满父布局。widthFactor 缩放因子。

FractionallySizedBox(
    widthFactor: 1.0, 
    child:Container(),
)     

3. // 撑开页面的布局组件

展开[Row]、[Column]或[Flex]子项的小部件, 以便孩子填充可用空间。
Expanded：可以撑开组件剩余的空间。for Row/Column/Flex
Expanded(child: Container()),

4. /// 适配刘海屏幕。

   double paddingTop = MediaQuery.of(context).padding.top; // 动态获取paddingTop
   return Container(
   // 动态设置top
   margin: EdgeInsets.fromLTRB(20, paddingTop + 10, 20, 5),
   padding: EdgeInsets.fromLTRB(20, 7, 20, 7),
   )

5. /// PhysicalModel 裁切圆角效果。

   PhysicalModel(
   color: Colors.transparent,
   borderRadius: BorderRadius.circular(16),
   clipBehavior: Clip.antiAlias, // 抗锯齿
   child: Container()),

6. // FractionallySizedBox使用这个组件，使得组件撑满父布局。widthFactor 宽度因子，默认值1.0

   return FractionallySizedBox(
   widthFactor: 0.8, child: Container()),

7. Column 水平方向撑开：CrossAxisAlignment.stretch

Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // stretch 水平方向撑开。

8. 获取模拟数据Get：

https://www.fastmock.site/mock/978685eaf6950d1e2f0790f85cfdacaa/cgi-bin/recommend_list

9. 错误逻辑，加载中逻辑添加：

HomePageIndex
if(error){
   return CommonError(action: this.setFirstPage);
}
if(contentList == null) {
   return Loading();
}