如何进行此布局并使用容器制作应用栏

Question

https://farrellanelca.website/gambar/Capture.PNG <-我想做这个

https://farrellanelca.website/gambar/Screenshot_2019-08-10-11-14-15-620_com.example.profile.png <-这就是我所做的

https://farrellanelca.website/gambar/code.txt <-代码

Answer 1

1。在pubspec.yaml中添加依赖项 --------> flutter_staggered_grid_view：0.3.0
2。使用此代码：

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

class GridImage extends StatefulWidget {
  @override
  _StaggeredGridState createState() => _StaggeredGridState();
}

class _StaggeredGridState extends State<GridImage> {
  final List<String> images = [
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAIeZIDQ9_7IqWgalkHVAWRQPrziayx-TfoOqMwaI_T2nfyMqrMQ",
    "https://images-na.ssl-images-amazon.com/images/I/81aF3Ob-2KL._UX679_.jpg",
    "https://wallpaperhd.wiki/wp-content/uploads/apple-iphone-wallpaper-hd-download-apple-iphone-5-images-download-gZQUxD.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNGy87QQ7QZ1AfTK_eEoIeugDSPg2ODaBj2R7F3EjIf9sXZCt2",
    "https://ae01.alicdn.com/kf/HTB11tA5aiAKL1JjSZFoq6ygCFXaw/Unlocked-Samsung-GALAXY-S2-I9100-Mobile-Phone-Android-Wi-Fi-GPS-8-0MP-camera-Core-4.jpg_640x640.jpg",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7wuqON8iZQ1xttqnYP7igi1gt2vD4w3xZ_iPuYnPVT8SVeNdK",
    "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmOyEIyyxRXOWY2-eK7f9LDs2EUNUu6HtD51RgYsdkiCXPSZV0",
    "https://www.galeanasvandykedodge.net/assets/stock/ColorMatched_01/White/640/cc_2018DOV170002_01_640/cc_2018DOV170002_01_640_PSC.jpg",
    "https://media.onthemarket.com/properties/6191869/797156548/composite.jpg",
    "https://i.pinimg.com/originals/34/b5/3a/34b53aa9e3072e3dd711b5140561f70c.jpg",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) => Container(
          decoration: BoxDecoration(border: Border.all(width: 0.5)),
          child: Column(
            children: <Widget>[
              Image.network(images[index]),
            ],
          ),
        ),
        staggeredTileBuilder: (int index) => new StaggeredTile.fit(2),
      ),
    );
  }
}