Question

是否可以使用网格系统在Flutter中进行布局。拥有类似于Bootstrap grid system的东西可能会很好。

我希望我的行包含4列，各列之间具有固定的空格（装订线）。（装订线槽的大小应相同，而不管屏幕的宽度如何。）

我想至少要说一句，该小部件的宽度应为N列，从i列开始。

因此最终的api可能是这样的：

GridRow(
  gutter: 16,
  columnsCount: 4,
  children: [
    GridColumn(child:SomeWidget, width:3, begin:2),
  ],
)

Answer 1

已经有一个可以满足您所有需求的软件包，它是StaggeredGridView。

这与您描述的语法不完全相同，但是功能应相同或更大。您可以通过设置mainAxisSpacing和crossAxisSpacing添加装订线，通过使用crossAxisCount设置列（或行，取决于方向）计数。

要指定子级使用的空间，请定义一个staggeredTiles列表，其中每个StaggeredTile代表相同索引的子级。

它与Bootstrap网格并不完全相同，但是距离足够近。

我整理了一个超级苗条的例子：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: StaggeredGridView.count(
          mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0, 
          crossAxisCount: 12,
          staggeredTiles: [
            StaggeredTile.count(6, 6),
            StaggeredTile.count(4, 1),
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 2),
          ],
          children: <Widget>[
            Container(
                color: Colors.red,
                child: Text('6,6')
            ),
            Container(
                color: Colors.green,
                child: Text('4,1')
            ),
            Container(
                color: Colors.blue,
                child: Text('2,2')
            ),
            Container(
                color: Colors.yellow,
                child: Text('2,2')
            ),
          ],
        ),
      ),
    );
  }
}

使用网格系统的颤振布局

1 个答案: