实现颤振 ui

Question

我一直在尝试重新创建此 ui，其中 gridview

这是我目前尝试过的方法

 GridView.builder(
                shrinkWrap: true,
                primary: true,
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  mainAxisExtent: 300,
                ),
                itemCount: snapshot.data!.length,
                padding: const EdgeInsets.all(8.0),
                itemBuilder: (BuildContext context, int index) {
                  final model = result[index];
                  return MyContainer(
                    loanProductModel: model,
                  );
                },
              )

这是我试过的截图。

Answer 1

您可以使用 flutter_staggered_grid_view 包和下面的代码来实现它

import 'package:flutter/material.dart';

class ScrollView extends StatelessWidget {
  const ScrollView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPadding(
            padding: EdgeInsets.symmetric(horizontal: 12),
            sliver: SliverStaggeredGrid.countBuilder(
                crossAxisCount: 2,
                mainAxisSpacing: 9.0,
                crossAxisSpacing: 9.0,
                staggeredTileBuilder: (int index) =>
                    StaggeredTile.count(1, index % 5 == 0 ? 1.5 : 1.2),
                itemCount: snapshot.data!.length,
                itemBuilder: (ctx, i) {
                  final model = result[index];
                  return MyContainer(
                    loanProductModel: model,
                  );
                }),
          ),
        ],
      ),
    );
  }
}

实现颤振 ui

Implementing flutter ui

gridview

flutter