Flutter-如何调整GridView单元的大小

时间:2019-01-13 13:09:12

标签: gridview flutter

我想调整GridView单元的大小(绿色区域)。下面是我的代码。

GridView.builder(
      controller: ScrollController(keepScrollOffset: true),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          width: 200.0,
          height: 300.0,
          color: Colors.green,
          margin: EdgeInsets.all(10.0),
        );
      }, 
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
    );
  }

我的目标是使UI如下所示:

enter image description here enter image description here

1 个答案:

答案 0 :(得分:1)

要在图片中重新创建应用程序,您可能想看一下PageView小部件。

这是一个示例应用程序:

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(child: PageView.builder(itemBuilder: _buildPage)),
      ),
    );
  }

  Widget _buildPage(BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.all(50.0),
      color: Colors.green,
      child: Center(child: Text("$index")),
    );
  }
}