Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解
11.首页_屏幕适配方案讲解
国人写的屏幕适配插件:
https://github.com/OpenFlutter/flutter_screenutil
最新版本是0.5.1
在pubspec.yaml文件内配置包:
引入这个包:
import 'package:flutter_screenutil/flutter_screenutil.dart';
初始化我们的设计尺寸:这里为什么尺寸是750*1334呢,因为技术胖的老板当时用的是iphone6 为了老板审图方便,就用的这个尺寸。所以我们这里也用这个尺寸。实际的工作中是根据图片的大小来设置的
修改高度
修改后
效果展示:
设备的像素密度、设备的高度、设备的宽度,再学三个
输出的内容:
最终代码:
import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; import 'dart:convert'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { String homePageContent='正在获取数据'; @override Widget 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(swiperDateList: swiper) ], ); }else{ return Center(child: Text('加载中....')); } }, ), ); } } //首页轮播插件 class SwiperDiy extends StatelessWidget { final List swiperDateList; //构造函数 SwiperDiy({this.swiperDateList}); @override Widget build(BuildContext context) { ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context); print('设备的像素密度:${ScreenUtil.pixelRatio}'); print('设备的高:${ScreenUtil.screenWidth}'); print('设备的宽:${ScreenUtil.screenHeight}'); return Container( height: ScreenUtil().setHeight(333),// width:ScreenUtil().setWidth(750), child: Swiper( itemBuilder: (BuildContext context,int index){ return Image.network("${swiperDateList[index]['image']}",fit: BoxFit.fill,); }, itemCount: swiperDateList.length, pagination: SwiperPagination(), autoplay: true, ), ); } }