在底部颤动gridview项目答案

【问题标题】：flutter gridview item at bottom在底部颤动gridview项目
【发布时间】：2022-01-03 03:40:01
【问题描述】：

我有一个带有动态项目数的 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),
              ),
          ],
        ),
      ),
    );
  }
}

现在我有了这个

但我想要这个

提前致谢。

【问题讨论】：

标签： flutter gridview alignment

【解决方案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
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

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

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

在使用 Stack 时，使用位置小部件（Positioned, Align,...) 将子级放置在 UI 上。

【讨论】：

【解决方案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
))

【讨论】：