11-Flutter移動(dòng)電商實(shí)戰(zhàn)-首頁_屏幕適配方案和制作

1、flutter_ScreenUtil插件簡介

flutter_ScreenUtil屏幕適配方案，讓你的UI在不同尺寸的屏幕上都能顯示合理的布局。

插件會讓你先設(shè)置一個(gè)UI稿的尺寸，他會根據(jù)這個(gè)尺寸，根據(jù)不同屏幕進(jìn)行縮放，能滿足大部分屏幕場景。

github:https://github.com/OpenFlutter/flutter_ScreenUtil

這個(gè)輪子功能還不是很完善，但是也在一點(diǎn)點(diǎn)的進(jìn)步，這也算是國內(nèi)現(xiàn)在最好的Flutter屏幕適配插件了，又不足的地方你可以自己下載源碼進(jìn)行修改，并使用。

個(gè)人覺的今年在國內(nèi)應(yīng)該是Flutter的爆發(fā)年，也會有更多更好用的插件誕生。

2、flutter_ScreenUtil的引入和使用

因?yàn)槭堑谌桨?#xff0c;所以還需要在pubspec.yaml文件中進(jìn)行注冊依賴。在填寫依賴之前，最好到github上看一下最新版本，因?yàn)檫@個(gè)插件也存在著升級后，以前版本不可用的問題。

dependencies:flutter_screenutil:?^0.5.2

需要在每個(gè)使用的地方進(jìn)行導(dǎo)入：

import?'package:flutter_screenutil/flutter_screenutil.dart';

3、初始化設(shè)置尺寸

在使用之前請?jiān)O(shè)置好設(shè)計(jì)稿的寬度和高度，傳入設(shè)計(jì)稿的寬度和高度，注意單位是px。

我們公司一般會以Iphone6的屏幕尺寸作設(shè)計(jì)稿，這個(gè)習(xí)慣完全是當(dāng)初公司組長的手機(jī)是Iphone6的，審核美工稿的時(shí)候，可以完美呈現(xiàn)，所以就沿用下來了（我想估計(jì)老總的手機(jī)早升級了）。

ScreenUtil.instance?=?ScreenUtil(width:?750,?height:?1334)..init(context);

這句話的引入一定要在有了界面UI樹建立以后執(zhí)行，如果還沒有UI樹，會報(bào)錯(cuò)的。比如我們直接放在類里，就會報(bào)錯(cuò)，如果昉在build方法里，就不會報(bào)錯(cuò)。

適配尺寸

這時(shí)候我們使用的尺寸是px.

• 根據(jù)屏幕寬度適配：width:ScreenUtil().setWidth(540);
• 根據(jù)屏幕高度適配：height:ScreenUtil().setHeight(200);
• 適配字體大小：fontSize：ScreenUtil().setSp(28,false);

配置字體大小的參數(shù)false是不會根據(jù)系統(tǒng)的"字體大小"輔助選項(xiàng)來進(jìn)行縮放。

根據(jù)學(xué)到的知識，來設(shè)置一下昨天的輪播圖片問題。

• 首先在home_page.dart里，用import進(jìn)行引入。
• 在build方法里，初始化設(shè)計(jì)稿尺寸，ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);.
• 給Container設(shè)置高和寬的值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='正在獲取數(shù)據(jù)';@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,),);} }

重新運(yùn)行一下項(xiàng)目，效果圖下圖所示：

posted @ 2019-06-15 22:45 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的11-Flutter移动电商实战-首页_屏幕适配方案和制作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。