底部的 gridview 项目

Question

我有一个带有动态项目数的 gridView（连续 3 个项目）。我希望 gridView 项目应该位于底部意味着如果有 3 个项目则屏幕底部有一行，如果有 6 个项目则底部有两行。因此，顶部的动态填充取决于项目数量和屏幕尺寸。我的代码结构如下

class className extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            ImageFiltered(
                //code here
                ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.black38,
            ),
            GridView.builder(
                primary: false,
                reverse: false,
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 30,
                ),
                itemBuilder: (context, index) {
                
                  return InkWell(
                    onTap: () {
                      //code
                    },
                    child: CustomWidget(
                      title: toolkitStore.getLabel(toolKit),
                      icon: ImageIcon(
                        AssetImage(
                            'assets/images/abcd.png'),
                        size: 48,
                        color: kWhiteColor,
                      ),
                    ),
                  );
                },
                itemCount: getCount().length,
                gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              ),
          ],
        ),
      ),
    );
  }
}

现在我有了这个

但我想要这个

提前致谢。

Answer 1

**试试这个：**

import 'package:flutter/material.dart';

class ClassName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Container(height: 100,width: 200,color: Colors.green,),//<----Your any widget
            Align(
              alignment: Alignment.bottomCenter,
              child: GridView.builder(
                primary: false,
                reverse: true,
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 30,
                ),
                itemBuilder: (context, index) {

                  return InkWell(
                    onTap: () {
                      //code
                    },
              child: const Icon(Icons.person,size: 50,color: Colors.green,),
                  );
                },
                itemCount: 5,
                gridDelegate:
                const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              ),
            ),
            Container(height: 100,width: 100,color: Colors.red,),//<----Your any widget
          ],
        ),
      ),
    );
  }
}

Answer 2

用 Align 小部件包装您的 GridView.builder 提供 alignment: Alignment.bottomCenter,

Align(
  alignment: Alignment.bottomCenter,
  child: GridView.builder(
      primary: false,
      reverse: false,

在使用 Stack 时使用位置小部件（Positioned、Align、...）将 children 放置在 UI 上。

Answer 3

谢谢大家

我通过使用定位小部件和设置 shrinkWrap: true 解决了我的问题，我的代码结构是

new Positioned(
              left: 0.0,
              bottom: 0.0,
              width: MediaQuery.of(context).size.width,
              child: GridView.builder(
                shrinkWrap: true, //this is most important
))

底部的 gridview 项目

flutter gridview item at bottom

gridview

alignment

flutter