11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移動電商實戰-首頁_屏幕適配方案和制作
1、flutter_ScreenUtil插件簡介
flutter_ScreenUtil屏幕適配方案,讓你的UI在不同尺寸的屏幕上都能顯示合理的布局。
插件會讓你先設置一個UI稿的尺寸,他會根據這個尺寸,根據不同屏幕進行縮放,能滿足大部分屏幕場景。
github:https://github.com/OpenFlutter/flutter_ScreenUtil
這個輪子功能還不是很完善,但是也在一點點的進步,這也算是國內現在最好的Flutter屏幕適配插件了,又不足的地方你可以自己下載源碼進行修改,并使用。
個人覺的今年在國內應該是Flutter的爆發年,也會有更多更好用的插件誕生。
2、flutter_ScreenUtil的引入和使用
因為是第三方包,所以還需要在pubspec.yaml文件中進行注冊依賴。在填寫依賴之前,最好到github上看一下最新版本,因為這個插件也存在著升級后,以前版本不可用的問題。
dependencies:flutter_screenutil:?^0.5.2需要在每個使用的地方進行導入:
import?'package:flutter_screenutil/flutter_screenutil.dart';3、初始化設置尺寸
在使用之前請設置好設計稿的寬度和高度,傳入設計稿的寬度和高度,注意單位是px。
我們公司一般會以Iphone6的屏幕尺寸作設計稿,這個習慣完全是當初公司組長的手機是Iphone6的,審核美工稿的時候,可以完美呈現,所以就沿用下來了(我想估計老總的手機早升級了)。
ScreenUtil.instance?=?ScreenUtil(width:?750,?height:?1334)..init(context);這句話的引入一定要在有了界面UI樹建立以后執行,如果還沒有UI樹,會報錯的。比如我們直接放在類里,就會報錯,如果昉在build方法里,就不會報錯。
適配尺寸
這時候我們使用的尺寸是px.
- 根據屏幕寬度適配:width:ScreenUtil().setWidth(540);
- 根據屏幕高度適配:height:ScreenUtil().setHeight(200);
- 適配字體大小:fontSize:ScreenUtil().setSp(28,false);
配置字體大小的參數false是不會根據系統的"字體大小"輔助選項來進行縮放。
根據學到的知識,來設置一下昨天的輪播圖片問題。
- 首先在home_page.dart里,用import進行引入。
- 在build方法里,初始化設計稿尺寸,ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);.
- 給Container設置高和寬的值height: ScreenUtil().setHeight(333),和width: ScreenUtil().setWidth(750),
全部代碼如下:
import?'dart:convert';import?'package:flutter/material.dart'; import?'../service/service_method.dart'; import?'package:flutter_swiper/flutter_swiper.dart'; import?'package:flutter_screenutil/flutter_screenutil.dart';class?HomePage?extends?StatefulWidget?{_HomePageState?createState()?=>?_HomePageState();}class?_HomePageState?extends?State<HomePage>?{String?homePageContent='正在獲取數據';@overrideWidget?build(BuildContext?context)?{return?Scaffold(appBar:?AppBar(title:?Text('百姓生活+'),),body:FutureBuilder(future:?getHomePageContent(),builder:?(context,snapshot){if(snapshot.hasData){var?data?=?json.decode(snapshot.data.toString());List<Map>?swiper?=?(data['data']['slides']?as?List).cast();return?Column(children:?<Widget>[SwiperDiy(swiperDataList:?swiper,)],);}else{return?Center(child:?Text("加載中"),);}},));} }輪播組件 class?SwiperDiy?extends?StatelessWidget?{final?List?swiperDataList;SwiperDiy({Key?key,this.swiperDataList}):super(key:key);@overrideWidget?build(BuildContext?context)?{ScreenUtil.instance?=?ScreenUtil(width:?750,height:?1334)..init(context);return?Container(height:?ScreenUtil().setHeight(333),width:?ScreenUtil().setWidth(750),child:?Swiper(itemCount:?swiperDataList.length,itemBuilder:?(BuildContext?context,int?index){return?Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);},pagination:?SwiperPagination(),autoplay:?true,),);} }重新運行一下項目,效果圖下圖所示:
posted @ 2019-06-15 22:45 niceyoo 閱讀(...) 評論(...) 編輯 收藏
總結
以上是生活随笔為你收集整理的11-Flutter移动电商实战-首页_屏幕适配方案和制作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Android RecyclerView
- 下一篇: java笔试题大全_java笔试题大全带