03Flutter仿京东商城项目封装适配库以及实现左右滑动ListView

àì夳堔傛蜴生んèń 2023-08-17 15:58 105阅读 0赞

![1057166-20190822070045950-842133813.png][]

ScreenAdaper.dart

import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    class ScreenAdaper {
      //
      static init(context) {
        ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
      }
    
      static height(double value) {
        return ScreenUtil.getInstance().setHeight(value);
      }
    
      static width(double value) {
        return ScreenUtil.getInstance().setWidth(value);
      }
    
      static getScreenHeight() {
        return ScreenUtil.screenHeightDp;
      }
    
      static getScreenWidth() {
        return ScreenUtil.screenWidthDp;
      }
    }
    /*  */

Home.dart

import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import '../../services/ScreenAdaper.dart';
    
    class HomePage extends StatefulWidget {
      HomePage({Key key}) : super(key: key);
    
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      //轮播图：
      //flutter run -d all 链接多个设备的命令：
      Widget _swiperWidget() {
        List<Map> imgList = [
          {"url": "https://www.itying.com/images/flutter/slide01.jpg"},
          {"url": "https://www.itying.com/images/flutter/slide02.jpg"},
          {"url": "https://www.itying.com/images/flutter/slide03.jpg"}
        ];
    
        return Container(
          child: AspectRatio(
            aspectRatio: 2 / 1,
            child: Swiper(
              itemBuilder: (BuildContext context, int index) {
                return new Image.network(
                  imgList[index]['url'],
                  fit: BoxFit.fill,
                );
              },
              itemCount: imgList.length,
              pagination: new SwiperPagination(),
              control: new SwiperControl(),
              autoplay: true,
            ),
          ),
        );
      }
    
      //标题：
      Widget _titleWidget(value) {
        return Container(
          height: ScreenAdaper.height(46),
          margin: EdgeInsets.only(left: ScreenAdaper.width(20)),
          padding: EdgeInsets.only(left: ScreenAdaper.width(20)),
          decoration: BoxDecoration(
              border: Border(
                  left: BorderSide(
                      color: Colors.red, width: ScreenAdaper.width(10)))),
          child: Text(value, style: TextStyle(color: Colors.black54)),
        );
      }
    
      //热门商品：
      Widget _hotProductListWidget() {
        return Container(
          height: ScreenAdaper.height(240),
          padding: EdgeInsets.all(ScreenAdaper.width(10)),
          // width: double.infinity, //寬度自適應
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (contxt, index) {
              return Column(
                children: <Widget>[
                  Container(
                    height: ScreenAdaper.height(140),
                    width: ScreenAdaper.width(140),
                    margin: EdgeInsets.only(right:ScreenAdaper.width(21)),
    
                    child: Image.network('https://www.itying.com/images/flutter/hot${index+1}.jpg',fit:BoxFit.cover),
                  ),
                  Container(
                    padding: EdgeInsets.only(top: ScreenAdaper.height(10)),
                    height: ScreenAdaper.height(44),
                    child: Text('第${index}条'),
                  )
                ],
              );
            },
            itemCount: 9,
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        ScreenAdaper.init(context);
        return ListView(
          children: <Widget>[
            _swiperWidget(),
            SizedBox(height: ScreenAdaper.height(20)),
            _titleWidget("猜你喜欢"),
    
            _hotProductListWidget(),
            SizedBox(height: ScreenAdaper.height(20)),
            _titleWidget("热门推荐"),
            
          ],
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11392202.html

[1057166-20190822070045950-842133813.png]: /images/20230810/55d9f885be0344fe9afec23cc1cfb2d4.png