Flutter新手坑點詳解

Flutter新手坑點詳解

記錄一下從零開始的Flutter遇到的坑點，可能會長期更新
原文鏈接：https://blog.csdn.net/weixin_44259356/article/details/104905384
由淺入深

Container設置自定義圓角

效果圖

代碼

注：顏色不能與Container color同時設置，會衝突。

decoration: new BoxDecoration(
 //設置顏色
 color: Color(0xFFCE9F76),
 //設置四周圓角 角度 這裏 設置了下面兩個角爲圓
 borderRadius: BorderRadius.only(bottomRight: Radius.circular(10),bottomLeft:Radius.circular(10)),
 ),

Flutter顏色

格式

color: Color(0xFFCE9F76)

或者

color:Colors.red

說明

第一種爲rgba設置放鬆，0x後兩位爲透明度，後四位爲16位顏色，另外還有RGBO和ARGB設置方式可自行查閱。

TabBar自定義菜單欄

用TabBar自定義菜單切換時如果提示爲定義部件寬度，無法顯示則應該在Expanded外面嵌套Container

SliverList設置頁面滑動效果

效果圖

代碼

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    shrinkWrap: true,
    // 內容
    slivers: <Widget>[
      new SliverPadding(
        padding: const EdgeInsets.all(0.0),
        sliver: new SliverList(
          delegate: new SliverChildListDelegate(
            <Widget>[


            ],
          ),
        ),
      ),
    ],
  );
}

異步請求消除地獄回調

async/await

//登陸異步執行流程
  loginStream(String mobile, String pwd) async {
    try{
      User user=await loginByPwd(mobile,pwd);
      //獲取團隊信息
      await getAgentInfo();
      //執行接下來的操作
      print("登陸成功");
      Provider
          .of<UserModel>(context, listen: false)
          .user = user;
    } catch(e){
      //錯誤處理
      print("錯誤");
      print(e);
    }
  }

Json轉model

使用json_model

導入包

dev_dependencies:
  json_model: #latest version
  build_runner: ^1.0.0
  json_serializable: ^2.0.0

執行

flutter packages pub run json_model

就能在model目錄下看到mod類了，每次修改json都必須執行此命令，不然數據無法持久化保存