在 Flutter 中使用交错网格视图建立瀑布流布局#yyds干货盘点#

2022年01月16日 阅读数:4
这篇文章主要向大家介绍在 Flutter 中使用交错网格视图建立瀑布流布局#yyds干货盘点#,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。


做者:坚果前端

公众号:undefined大前端之旅undefinedvue

华为云享专家,InfoQ签约做者,阿里云专家博主,51CTO博客首席体验官,​​开源项目GVA成员之一​​,专一于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。小程序

立刻过新年了,想好如何过年了吗?,今天我带你们在瀑布流布局中写新年快乐。 在 Web 和移动开发世界中,当咱们想要显示大小不相同的项目网格时,瀑布流布局颇有用。一个轴使用严格的网格布局,一般是列。在另外一个轴上,项目具备不一样的高度,但能够灵活排列以填满可用空间。使用瀑布流布局的一个著名例子是 Pinterest。他们为他们的网站和移动应用程序实现了这种布局,以显示不一样大小的图像。 本文将向您经过使用名为MasonryGridView提供一个流行的包​​fluter_staggered_grid_view​​。微信

应用预览

在 Flutter 中使用交错网格视图建立瀑布流布局#yyds干货盘点#_瀑布流布局

咱们要构建的应用程序包含一个 3 列的瀑布流布局。每一个项目都有一个随机的背景颜色和一个动态的高度。:app

在 Flutter 中使用交错网格视图建立瀑布流布局#yyds干货盘点#_ide_02

代码

经过运行安装插件:less

flutter pub add flutter_staggered_grid_view

而后执行这个命令:dom

flutter pub get

main.dart 中的完整源代码及说明:ide

// main.dart
import 'package:flutter/material.dart';
import 'dart:math';

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '大前端之旅',
theme: ThemeData(
primarySwatch: Colors.amber,
),
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
// Generate a list of dummy items
final List<Map<String, dynamic>> _items = List.generate(
200,
(index) => {
undefinedidundefined: index,
undefinedtitleundefined: undefined 新年快乐$indexundefined,
undefinedheightundefined: Random().nextInt(150) + 50.5
});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('大前端之旅祝你新年快乐'),
),
// implement the massonry layout
body: MasonryGridView.count(
itemCount: _items.length,
padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 10),
// the number of columns
crossAxisCount: 3,
// vertical gap between two items
mainAxisSpacing: 4,
// horizontal gap between two items
crossAxisSpacing: 4,
itemBuilder: (context, index) {
// display each item with a card
return Card(
// Give each item a random background color
color: Color.fromARGB(
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256),
Random().nextInt(256)),
key: ValueKey(_items[index]['id']),
child: SizedBox(
height: _items[index]['height'],
child: Center(
child: Text(_items[index]['title']),
),
),
);
},
));
}
}

结论

你已经学习了如何在 Flutter 中制做瀑布流布局。在您想要构建漂亮且专业的用户界面的许多状况下,这些知识可能会有所帮助。若是您想探索更多关于 Flutter 和 Dart 的新奇有趣的东西,请查看如下文章: ​​最新Flutter 微信分享功能实现【Flutter专题23】​布局

你们的点赞与支持就是对我最大的鼓励。学习