如何使 Post Grid 颤动？

Question

我更容易颤抖。我想在fluuter中制作一个后网格布局。我已经用 GridView builder 试过了。但它与我的布局不兼容。我的布局是这样的。

任何人都可以向我建议合适的布局类型。

Answer 1

你必须使用这个包flutter_staggered_grid_view：^0.2.7这是展示如何使用它https://www.youtube.com/watch?v=SrGP1BdkYpk&t=123s为pawan kumar的视频。

Answer 2

您可以将SingleChildScrollView 与两个Columns 和一个Row 一起使用。下面的小部件树创建了所需的网格，没有任何额外的依赖：

- SingleChildScrollView
  - Row
    - Column
      - Cards...
    - Column
      - Cards...

这是一个小的独立代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child:
              Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        MyCard(),
                        MyCard(large: true),
                        MyCard(),
                        MyCard(large: true),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        MyCard(large: true),
                        MyCard(),
                        MyCard(large: true),
                        MyCard(),
                        MyCard(),
                      ],
                    ),
                  )
                ],
              )
          ),
        )
      ),
    );
  }
}

class MyCard extends StatelessWidget {
  final bool large;

  MyCard({this.large = false});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: Container(
        height: large ? 60.0 : 40.0,
        color:  large ? Colors.lightBlueAccent : Colors.deepOrangeAccent,
      ),
    );
  }
}

Answer 3

你可以使用这个插件： https://pub.dev/packages/flutter_staggered_grid_view

例如：

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

const List<StaggeredTile> _staggeredTiles = <StaggeredTile>[
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 1),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(1, 2),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(3, 1),
  StaggeredTile.count(1, 1),
  StaggeredTile.count(4, 1),
];

const List<Widget> _tiles = <Widget>[
  _Example01Tile(Colors.green, Icons.widgets),
  _Example01Tile(Colors.lightBlue, Icons.wifi),
  _Example01Tile(Colors.amber, Icons.panorama_wide_angle),
  _Example01Tile(Colors.brown, Icons.map),
  _Example01Tile(Colors.deepOrange, Icons.send),
  _Example01Tile(Colors.indigo, Icons.airline_seat_flat),
  _Example01Tile(Colors.red, Icons.bluetooth),
  _Example01Tile(Colors.pink, Icons.battery_alert),
  _Example01Tile(Colors.purple, Icons.desktop_windows),
  _Example01Tile(Colors.blue, Icons.radio),
];

class Example01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('example 01'),
        ),
        body: Padding(
            padding: const EdgeInsets.only(top: 12),
            child: StaggeredGridView.count(
              crossAxisCount: 4,
              staggeredTiles: _staggeredTiles,
              mainAxisSpacing: 4,
              crossAxisSpacing: 4,
              padding: const EdgeInsets.all(4),
              children: _tiles,
            )));
  }
}

class _Example01Tile extends StatelessWidget {
  const _Example01Tile(this.backgroundColor, this.iconData);

  final Color backgroundColor;
  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: InkWell(
        onTap: () {},
        child: Center(
          child: Padding(
            padding: const EdgeInsets.all(4),
            child: Icon(
              iconData,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}