Grid View元素在主屏幕上被裁剪了?

问题描述 投票:0回答:2

我在主屏幕上有一个可滚动的网格视图,其中包含一些容器。但是,由于包装了此容器的高度,此网格视图已被裁剪。容器是列的一部分,而列又是堆栈的一部分。

Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      return true;
    },
    child: Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [const Color(0xFFFEFEFE), const Color(0xFFFEFEFE)],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
          ),
        ),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              bottom: 70,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    SizedBox(height: 20),
                    Text(
                      "Hello,",
                      style: TextStyle(
                        fontFamily: "Netflix",
                        fontWeight: FontWeight.w600,
                        fontSize: 32,
                        letterSpacing: 0.27,
                        color: Color(0xFFFF8C3B).withOpacity(0.7),
                      ),
                    ),
                    SizedBox(height: 4),
                    name(context),
                    SizedBox(height: 40),
                    Text(
                      "Home",
                      style: TextStyle(
                        fontFamily: "Netflix",
                        fontWeight: FontWeight.w600,
                        fontSize: 35,
                        letterSpacing: 0.27,
                        color: Color(0xFFFF8C3B),
                      ),
                    ),
                    SizedBox(height: 15),
                    Container(
                      height: MediaQuery.of(context).size.height / 3,
                      width: MediaQuery.of(context).size.width,
                      child: GridView.builder(
                        itemCount: homeList.length,
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2, 
                          mainAxisSpacing: 20,
                        ),
                        itemBuilder: (ctx, i) {
                          return GestureDetector(
                            onTap: () {
                              if (i == 0) {
                                _interstitialAd.show();
                              } else if (i == 1) {
                                FlutterPollfish.instance.show();
                              } else if (i == 2) {
                                sendInvite();
                              }

这是它的外观:enter image description here

这就是我想要的样子。我尝试使容器的高度:

 height: MediaQuery.of(context).size.height / 2, 

enter image description here

user-interface flutter gridview dart user-experience
2个回答
0
投票

请分享整个代码段


0
投票

使用Expanded

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      SizedBox(height: 20),
      Text(
        "Hello,",
        style: TextStyle(
            fontFamily: "Netflix",
            fontWeight: FontWeight.w600,
            fontSize: 32,
            letterSpacing: 0.27,
            color: Color(0xFFFF8C3B).withOpacity(0.7),
        ),
      ),
      SizedBox(height: 4),
      name(context),
      SizedBox(height: 40),
      Text(
        "Home",
        style: TextStyle(
          fontFamily: "Netflix",
          fontWeight: FontWeight.w600,
          fontSize: 35,
          letterSpacing: 0.27,
          color: Color(0xFFFF8C3B),
        ),
      ),
      SizedBox(height: 15),
      Expanded( //TODO: Use Expanded here
        child: GridView.builder(
          itemCount: homeList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, mainAxisSpacing: 20,
          ),
          itemBuilder: (ctx, i) {
            return GestureDetector(
              onTap: () {
                if (i == 0) {
                  _interstitialAd.show();
                } else if (i == 1) {
                  FlutterPollfish.instance.show();
                } else if (i == 2) {
                  sendInvite();
                }
© www.soinside.com 2019 - 2024. All rights reserved.