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移动电商实战-首页_屏幕适配方案和制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。