Flutter 中巴不得直接貼來的佈局效果

時間 2019-12-16

標籤 flutter 中巴不得直接來的佈局效果简体版

原文原文鏈接

家長裏短

隔一段時間，本身總會有點新奇的想法，在編碼的過程當中，到底要積累多少內容，或者說踩過多少坑，才能「順風順水」，若是你沒有讀過洋小洋其餘文章的話，那仍是先說一，來了就不準走了。其實我也不是個專業的寫手，可是我知道有不少人在一塊兒共同的學習，可能之後會像掘金大佬同樣，一篇一出就是幾萬字，剖析原理，那這些，咱慢慢來，以後我沒準也寫個什麼5萬字React.js終於開源了，也有老哥老妹看不過癮，說是過短了，不過chixu沒得事兒，我們持續的，持久的更新，作個持久Boy -- Do itgit

主題：本身研究Flutter 部件，手擼常見的佈局效果
更新頻次：持續、一直、always

進入正題

首先先來看一下效果，這也是筆者踩了些坑才寫出如此簡陋的效果，那至於踩了什麼坑仍是建議看一下，這個 Flutter實際項目開發中踩坑大合集（持續更新..）github

效果

此時正在看着的你，該說了這不簡單嗎，一個滾動的部件，搞定

SingleChildScrollView

SingleChildScrollView({
 this.scrollDirection = Axis.vertical, //滾動方向，默認是垂直方向
 this.reverse = false, 
 this.padding, 
 bool primary, 
 this.physics, 
 this.controller,
 this.child,
})
複製代碼

ListView

ListView({
  ...  
  //可滾動widget公共參數
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  EdgeInsetsGeometry padding,

  //ListView各個構造函數的共同參數 
  double itemExtent,
  bool shrinkWrap = false,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,

  //子widget列表
  List<Widget> children = const <Widget>[],
})
複製代碼

GridView

GridView({
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, //控制子widget layout的委託
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})
複製代碼

這不是那麼多滾動的部件呢嗎？但是我們要看下數據緩存

final List listData = [
  {
    "date": "2019-12-05",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      }
    ]
  },
  {
    "date": "2019-12-04",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      }
    ]
  },
];
複製代碼

也就是說這個數據是不肯定的，因此呢我們就來用一下大名鼎鼎的Sliver 這個東西很厲害的，能作出一些很炫酷的滾動動畫，首先不太明白的，我們能夠看文末是有一篇文章講解，我認爲蠻好app

引包

常規操做，莫怪ide

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

複製代碼

主要我們有用到圖片的緩存因此就使用到第二個cached_network_image函數

搞數據

final List listData = [
  {
    "date": "2019-12-05",
    "list": [
      {
        "pictureURL": "https://yayxs.github.io/head.jpg",
      },
    ]
  },
  ....................
];
複製代碼

這裏我們上邊有看過佈局

聲明controller

ScrollController _controller = new ScrollController();
複製代碼

這個仍是頗有必要的，由於咱們要有個統一化的滾動效果爲了不內存泄露，須要調用_controller.disposepost

@override
  void dispose() {
    //爲了不內存泄露，須要調用_controller.dispose
    _controller.dispose();
    super.dispose();
  }
複製代碼

核心代碼

Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
            delegate: SliverChildBuilderDelegate(
          (context, index) => Container(
            child: Container(
              child: Column(
                children: <Widget>[
                  _dateTitle(listData[index]['date']),
                  Container(
                      decoration: BoxDecoration(
                          border: Border.all(width: 1, color: Colors.red)),
                      child: Wrap(
                          spacing: 8.0, // 主軸(水平)方向間距
                          runSpacing: 4.0, // 縱軸（垂直）方向間距
                          alignment: WrapAlignment.spaceEvenly, //沿主軸方向居中
                          children: (listData[index]['list'])
                              .map<Widget>((item) => Container(
                                    child: _onePic(item['pictureURL']),
                                  ))
                              .toList())),
                ],
              ),
            ),
          ),
          childCount: listData.length,
        ))
      ],
    );
  }
複製代碼

// 日期
  Widget _dateTitle(String date) {
    return Container(
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 16),
        child: Text(
          date,
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
複製代碼

// 每張圖片
  Widget _onePic(url) {
    return Container(
      width: 200,
      height: 200,
      padding: EdgeInsets.all(5),
      child: CachedNetworkImage(
        imageUrl: url,
        fit: BoxFit.cover,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );
  }
複製代碼

那先這樣簡明扼要的聊一下，詳細代碼能夠見滾動效果已經有辣麼多Demo 了學習