首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

flutter我正在使用gridview.count,但是我不能设置高度

在使用Flutter的GridView.count时,无法直接设置高度是因为GridView.count是根据子项的数量和宽高比自动计算出高度的。但是你可以通过其他方式来控制GridView.count的高度。

一种方法是使用Container组件来包裹GridView.count,并设置Container的高度属性。例如,你可以将GridView.count放在一个Container中,并设置Container的height属性为固定值或者根据需要进行计算,以达到你想要的高度。

另一种方法是使用Expanded组件将GridView.count包裹起来,并将Expanded放在一个具有固定高度的父容器中。这样,Expanded会自动填充父容器的剩余空间,从而实现设置GridView.count的高度。

以下是一个示例代码,演示了如何使用Container和Expanded来设置GridView.count的高度:

代码语言:txt
复制
Container(
  height: 200, // 设置Container的高度
  child: GridView.count(
    crossAxisCount: 2,
    children: List.generate(4, (index) {
      return Container(
        color: Colors.blue,
        margin: EdgeInsets.all(10),
        child: Center(
          child: Text(
            'Item $index',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
      );
    }),
  ),
)

在上述示例中,我们将GridView.count放在一个高度为200的Container中,从而限制了GridView.count的高度为200。你可以根据实际需求调整Container的高度。

希望这个回答能够帮助到你!如果你对其他云计算或Flutter相关的问题有任何疑问,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter代码模板,解放双手,提高开发效率必备

Flutter开发的朋友们都有一个疑问,自带的快捷提示不是很丰富,没有你想要的功能,不管是Android Studio 还是IDEA,斗狠有局限性,有的朋友可能在用VSCode,那个插件有两个,都试过都不好用...于是自己就写了一些常用Flutter代码模板,导入AS或者IDEA可以直接使用。...为例,VSCode的代码模板有点麻烦,正在整理中) 首先打开github网址 https://github.com/AweiLoveAndroid/Flutter-learning/blob/master...CustomScrollView + SliverGrid创建列表 gv 创建GridView.count lv 创建基本的ListView lvb 创建ListView.builder lvd 创建带分割线的...---- gv 创建 GridView.count: ? ---- lv 创建基本的ListView: ? ---- con 创建完整的Container: ?

1.8K10

Flutter轻松实现Adobe全家桶Logo列表

的手势(GestureDetector)分析详解 Flutter进阶篇(4)-- Flutter的Future异步详解 Flutter进阶篇(5)-- 使用Flutter创建插件详解并发布到Pub库...Flutter进阶篇(6)-- PageStorageKey、PageStorageBucket和PageStorage使用详解 Flutter进阶篇(7)-- Flutter路由轻量级框架FRouter...总之,一看就可以让人记住,真是具有的魔性Logo,不得不佩服Adobe公司设计Logo的团队的创意人才,今天要给大家带来的是使用Flutter实现Adobe公司的Logo并让它们同屏展出,全部用代码实现...下面开始带领大家直接撸码: ---- 首先创建列表 首先我们创建一个GridView,我们使用GridView.count,然后我们先用10个Container填充一下,也就说每一个item都是Container...自定义圆角弧度 我们发现有的有圆角,有的是没有圆角弧度的,所以这时候要对每一个Item进行个性化设置,圆角是在Container里面设置的,么要对它进行操作,传入一个bool类型的值(也就是showRectRadis

62340

Flutter 入门指北之滑动部件(超详细)

加入我们的 item 之间的分割线需要如下样式:奇数位和偶数位之间用黑色分割线,偶数位和奇数位之间用红色分割线 // 需要分割线的时候才使用不能指定 item 的高度 body: ListView.separated...也提供了 GridView 来实现,实现 GridView 的方法也很多...数了下,大概有 10 种..对你没看错,就是那么多,(诶诶诶,别走啊...虽然方法有点多,但是,大同小异) GridView.../高度,在这个值范围内取最大值,比如一排能给你排下 6 个,但是远不到设置的最大值,它绝不给你排 6 个 那么接下来的使用就比较简单了 class GridViewDemoPage extends StatelessWidget...为了方便写法呢,Flutter 对以上的两种方式进行了封装,省略了 delegate GridView.count/GridView.extent 直接看下如何修改 // 这种情况简化了 `GridView...` 使用 `SliverGridDelegateWithFixedCrossAxisCount` 代理的方法 body: GridView.count( crossAxisSpacing

2.4K30

Flutter 构建完整应用手册-列表 顶

Flutter包含ListView部件,使列表变得轻而易举! 创建一个ListView 使用标准的ListView构造函数非常适合仅包含少量项目的列表。...例如,我们可能正在制作一个列表,其中显示一个标题,后面跟着与该标题相关的几个项目,后面是另一个标题,等等。 我们如何用Flutter创建这样一个结构?...一般来说,我们希望提供一个builder函数来检查我们正在处理的项目类型,并返回该类型项目的相应部件。 在这个例子中,使用is关键字来检查我们正在处理的项目类型可能非常方便。...但是,如果您更喜欢另一种模式,则有不同的方法可以解决此问题!...对于这个任务,我们将使用GridView部件。 开始使用网格的最简单方法是使用GridView.count构造函数,因为它允许我们指定我们想要的行数或列数。

2.5K20

Flutter可滑动组件

return ListTile(title: Text("滑动列表演示$index")); }, ); } } 上面创建了容量为100的滑动列表,同时将每个item的高度强行设置为...在Flutter中我们可以使用GridView来实现,使用方式和ListView也比较相似。...可以看到上面传入的类名很长,使用起来很不方便。GridView.count方法对SliverGridDelegateWithFixedCrossAxisCount进行了封装,方便开发者使用。...3.2 Flutter 中常用的 Sliver Sliver名称 功能 对应的可滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定的列表 指定itemExtent...4.2 ScrollController 在Flutter中,Widget并不是最终渲染到屏幕上的元素(真正渲染的是RenderObject),因此通常这种监听事件以及相关的信息并不能直接从Widget

7.1K30

Flutter | 滚动组件,ListView,GridVIew等

像素,但是 ViewPort 任然是 800 像素 基于 Sliver 的延时构建 通常可滚动的组件会非常多,占用的总高度也会非常大;如果一次性将子组件全部构建出将会非常昂贵!...复制代码 意思是 ListView 的高度无法确定,所以解决的办法就是给 ListView 设置边界,我们可以使用 SizedBox 指定具体的高度: children: [ Text("商品列表"...listView 的高度是固定的,就会导致底部留白,这种情况可以使用屏幕的高度 减去状态类,导航栏,头部的高度。...context).size.height - 24 - 56 - 56, 复制代码 使用这种方式可以达到效果,但是实现的方式并不好,如有有人任意一个高度发生变化,就要修改代码 那么有什么方法可以自动拉伸...Sliver 版的 SliverList,SliverGrid 自身是不能滚动的,所以他们的子项就会失去延时初始化的作用 但是由于 SliverList 等本身是支持 Sliver 的,所以他们自己应该是支持

8.4K20

Flutter开发-可滚动组件

为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局。...shrinkWrap:该属性表示是否根据子组件的总长度来设置ListView的长度,默认值为false 。默认情况下,ListView的会在滚动方向尽可能多的占用空间。...GridView.count GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount,我们通过它可以快速的创建横轴固定数量子元素的...如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的,所以这时就需要一个”胶水”,把这些彼此独立的可滚动组件”粘”起来,而CustomScrollView...因此,为了能让可滚动组件能和CustomScrollView配合使用Flutter提供了一些可滚动组件的Sliver版,如SliverList、SliverGrid等。

4.5K20

半小时带你入门 Flutter

但是Element是描述固定在渲染书中的某一个特定位置的点。简单点说widget作为一种描述是可以复用的,但是element却跟需要绘制的节点一一对应。那element是最终渲染的view么?...,这个State中有些值发生了变化,以便及时将新值更新到UI上, // 如果不通过setState更改_count字段,那么Flutter并不会调用build匿名函数去更新界面...如果需要构建自定义grid,可是使用GridView.count或 GridView.extent来指定允许设置的列数以及指定项最大像素宽度。...Stack的内容不能滚动。有点类似于weex中的设置了absolute的感觉。底部组件永远在上面组件的上面。 ListView 可滚动的长列表,可以水平或者垂直。...ListTile Material风格组件,理解为常用的列表Item的样式,最多三行文字,可选的行前、行尾的图标 img 代码链接 Nealyang/flutter 总结 从目前个人浅薄的Flutter

1.7K20

Flutter从入门到能寄几玩儿

但是Element是描述固定在渲染书中的某一个特定位置的点。简单点说widget作为一种描述是可以复用的,但是element却跟需要绘制的节点一一对应。那element是最终渲染的view么?...,这个State中有些值发生了变化,以便及时将新值更新到UI上, // 如果不通过setState更改_count字段,那么Flutter并不会调用build匿名函数去更新界面...如果需要构建自定义grid,可是使用GridView.count或 GridView.extent来指定允许设置的列数以及指定项最大像素宽度。 ?...Stack的内容不能滚动。有点类似于weex中的设置了absolute的感觉。底部组件永远在上面组件的上面。 ListView 可滚动的长列表,可以水平或者垂直。...img 代码链接 Nealyang/flutter 总结 从目前个人浅薄的Flutter技能来说,最大的困难可能是找不到合适的Widget去实现想要的布局或者效果,甚至包括css样式作用于那个Widget

1.4K10

GridView滚动列表的顶级用法【flutter20个实例之二】

一、老套路,先看样式 文章底部源码,是左侧样式,右侧是实际开发中的展示 ? ? 二、讲解(后附源码) 1.这里主要是用到GridView 组件 GridView是一个可滚动的,2D数组控件。...2.如果需要翻转滚动方向,比如从上到下,改为从下到上 需要设置属性:true表示翻转 reverse: false 3.如果需要横向滚动,设置以下属性 scrollDirection: Axis.horizontal...组件,增加一个padding 按Alt+Enter可以调出新增组件的快捷键,鼠标放在某个组件上,然后Alt+Enter可以给组件包裹一层padding 相关快捷键操作链接:Android Studio对flutter...80, color: Colors.primaries[index % Colors.primaries.length], ); }, itemCount: 50, ) GridView.count...80, color: Colors.primaries[i % Colors.primaries.length], ); }), ) 三、源码 import 'package:flutter

1.9K20

Flutter 初学者必读的高级布局规则

作者 | Marcelo Glasberg 译者 | 王强 策划 | 张晓楠 假设有人正在学习 Flutter,他问你为什么有的 width:100 的 widget 宽度不是 100 像素,标准答案是让他将...父项:你的宽度必须在 90 到 300 像素之间,高度在 30 到 85 像素之间。 Widget:想有 5 像素的 padding,所以我的子项最多有 290 像素的宽度和 75 像素的高度。...Widget:你好第一个子项,你的宽度必须在 0 到 290 像素之间,高度在 0 到 75 像素之间。 第一个子项:好的,那么希望自己的宽度是 290 像素,高度为 20 像素。...Widget:那么,因为想将第二个子项放在第一个子项之下,因此第二个子项只剩下 55 像素的高度。...另一方面,宽松 的约束可设置 最大 宽度 / 高度,但允许 widget 自由取小于这个值的大小。

1.6K20
领券