Question

我非常振奋。我想在Fluuter中进行后期网格布局。我已经尝试使用GridView构建器。但这与我的布局不兼容。我的布局是这样的。

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

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,
      ),
    );
  }
}

如何使后栅格变得扑朔迷离？

2 个答案: