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,
      ),
    );
  }
}

home_page.dart