Flutter瀑布流詳解

一、瀑布流布局

瀑布流布局是常見的UI設計方式之一，Flutter提供了一種輕鬆創建瀑布流的方式。我們可以使用瀑布流來展示照片、商品等。在Flutter中，我們可以使用兩個庫來創建瀑布流布局：flutter_staggered_grid_view和flutter_waterfall_flow。

1. Flutter Staggered Grid View

flutter_staggered_grid_view是一個創建瀑布流的Flutter插件。使用此插件，我們可以輕鬆地創建不同大小和間距的各種瀑布流布局。下面是一段使用flutter_staggered_grid_view創建瀑布流布局的代碼示例：

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter瀑布流"),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: 12,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.green,
            child: Center(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text('$index'),
              ),
            ),
          );
        },
        staggeredTileBuilder: (int index) =>
            StaggeredTile.count(2, index.isEven ? 2 : 1),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

在這個示例中，我們使用了flutter_staggered_grid_view中的StaggeredGridView.countBuilder()來創建一個瀑布流布局。我們設置了列數為4，總共展示了12個items。staggeredTileBuilder為每個item設置了大小，以實現不規則的瀑布流排列。mainAxisSpacing和crossAxisSpacing分別為item之間設置了橫向和縱向的間距。

2. Flutter Waterfall Flow

flutter_waterfall_flow是另一個常用的Flutter庫，它可以輕鬆地創建瀑布流布局。下面是一段使用flutter_waterfall_flow創建瀑布流布局的示例代碼：

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter瀑布流"),
      ),
      body: WaterfallFlow.builder(
        gridDelegate:
            SliverWaterfallFlowDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        itemCount: 12,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.green,
            child: Center(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text('$index'),
              ),
            ),
          );
        },
      ),
    );
  }
}

在這個示例中，我們使用了flutter_waterfall_flow庫中的WaterfallFlow.builder()來創建一個瀑布流布局。我們使用了SliverWaterfallFlowDelegateWithFixedCrossAxisCount來指定列數，總共展示了12個items。

二、瀑布流網路圖片

在很多APP中，我們需要展示網路圖片，通常我們會使用縮略圖，以提高展示的效率。Flutter提供了Image.network來展示網路圖片，我們可以在其後面加上對應的尺寸參數，以便節省載入時間和帶寬。下面是一段使用flutter_staggered_grid_view和Image.network展示網路圖片的代碼示例：

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter瀑布流"),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: 6,
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
            "https://images.unsplash.com/photo-1560070354-2dbfa8aeb2fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
            fit: BoxFit.cover,
          );
        },
        staggeredTileBuilder: (int index) => StaggeredTile.count(2, index.isEven ? 2 : 3),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}

在這個示例中，我們使用了flutter_staggered_grid_view和Image.network來聯合創建瀑布流網路圖片。我們設置了列數為4，總共展示了6個照片。我們使用了staggeredTileBuilder來設置每個照片的大小，並使用了mainAxisSpacing和crossAxisSpacing來為每個照片設置橫向和縱向的間距。使用fit: BoxFit.cover為照片設置了適配模式，以便讓其完整地展示在布局中。

三、瀑布流無限滾動

在展示很多item的時候，我們通常需要使用無限滾動來提高用戶體驗。在Flutter中，我們可以使用ListView和GridView來實現瀑布流的無限滾動。下面是一段使用flutter_staggered_grid_view實現瀑布流無限滾動的代碼示例：

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<int> _images = List.generate(50, (index) => index);
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter瀑布流"),
      ),
      body: StaggeredGridView.countBuilder(
        controller: _scrollController,
        crossAxisCount: 4,
        itemCount: _images.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            color: Colors.green,
            child: Center(
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: Text('Item $index'),
              ),
            ),
          );
        },
        staggeredTileBuilder: (int index) =>
            StaggeredTile.count(2, index.isEven ? 3 : 2),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        _loadMore();
      }
    });
  }

  void _loadMore() {
    setState(() {
      _images.addAll(List.generate(10, (index) => index + _images.length));
    });
  }
}

在這個示例中，我們使用了flutter_staggered_grid_view和ListView來創建一個瀑布流無限滾動。我們設置了列數為4，初始展示了50個items。我們使用了staggeredTileBuilder來設置每個item的大小，並使用了mainAxisSpacing和crossAxisSpacing來為每個item設置橫向和縱向的間距。我們使用了ScrollController來監聽滾動，並且在到達底部時動態載入了10個items。

四、總結

瀑布流布局在APP開發中是非常有用的一種UI設計方式。Flutter提供了很多創建瀑布流的方式，例如flutter_staggered_grid_view和flutter_waterfall_flow。我們還可以使用Image.network添加網路圖片，以及使用ListView和GridView實現瀑布流無限滾動。希望本文能幫助到大家，為Flutter的瀑布流開發提供一些參考。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/256393.html