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

如何设置有GridView子级的Container()高度??颤动

要设置有GridView子级的Container()高度,可以使用Expanded组件来实现。

Expanded组件可以将子组件填充并扩展到可用空间的剩余部分。在这种情况下,我们可以将GridView作为Expanded的子组件,并将Container作为GridView的子级。

以下是一个示例代码:

代码语言:txt
复制
Container(
  height: 200, // 设置Container的高度
  child: GridView.count(
    crossAxisCount: 2, // 设置GridView的列数
    children: [
      // GridView的子级
      Container(
        color: Colors.red,
        child: Text('Item 1'),
      ),
      Container(
        color: Colors.blue,
        child: Text('Item 2'),
      ),
      // 其他子级...
    ],
  ),
)

在这个示例中,我们将Container的高度设置为200,然后将GridView作为Container的子级。通过设置GridView的crossAxisCount属性,我们可以指定GridView的列数。然后,我们可以在GridView的children属性中添加子级。

这样,Container的高度将根据GridView的内容自动调整,并且可以滚动显示超出Container高度的GridView子级。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求灵活调整服务器配置和规模。了解更多:腾讯云云服务器(CVM)
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于存储和处理各种类型的数据。了解更多:腾讯云对象存储(COS)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter | 滚动组件,ListView,GridVIew

值;这里长度指的是方向上组件长度,也就是说滚动是垂直方向,则 itemnExtent 代表组件高度;如果是水平方向,则是组件宽度。...) shrinkWrap:是否根据组件总长度来设置 ListView 长度,默认值为 false,默认情况下, ListView 会在滚动方向尽可能占用更多空间。...复制代码 意思是 ListView 高度无法确定,所以解决办法就是给 ListView 设置边界,我们可以使用 SizedBox 指定具体高度: children: [ Text("商品列表"...gridDelegate:类型是 SliverGridDelegate,他作用是控制 GridView 如何排列(layout) SliverGridDelegate 是一个抽象类,定义类 GridView...GridView.builder 必须指定构造参数两个: GridView.builder( ...

8.5K20
  • Flutter可滑动组件

    1.2 默认构造函数 默认构造函数一个children参数,它接受一个Widget列表(List)。这种方式适合只有少量组件数量已知且比较少情况。...1.3 ListTile 在开发中,我们经常见到一种列表,一个图标或图片(Icon),一个标题(Title),一个子标题(Subtitle),还有尾部一个图标(Icon)。...,同时将每个item高度强行设置为50。...根据原型生成高度固定列表 指定prototypeItemListView SliverFillViewport 包含多给组件,每个都可以填满屏幕 PageView 除了和列表对应 Sliver...ScrollController可以通过initialScrollOffset设置初始位置,也可以监听到滚动位置,但无法监听到开始滚动与结束滚动事件。

    7.2K30

    New UWP Community Toolkit - AdaptiveGridView

    控件定义和事件处理类; AdaptiveHeightValueConverter.cs - 自适应高度转换器,根据传入 value: ItemHeight,以及 padding、margin 等参数得到自适应高度...或 container 为空时,设置为需要 container Margin;最后根据 每一列在 container宽度,减掉 itemMargin,得到 itemWidth; protected...savedHorizontalScrollMode); } } } ④ OnSizeChanged(sender, e) 在尺寸变化时,如果横向不是拉伸状态,则需要计算变化前后列数是否变化...OneRowMode 时使用,作用是把原高度,加上 padding 和 margin 变成新高度,效果就是单行模式时,元素在高度上没有空隙;设置 Item padding 和 margin 会失效...CalculateItemWidth(containerWidth) 方法中使用,值设置优先是:先取 GridView 对应 Margin 属性值,如果为空,则取 GridViewItem Margin

    1.4K70

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

    )), 如果每个 item 高度可以确定,那么推荐通过 itemExtent 来设置 item 高度/宽度,能够加快 ListView 渲染速度。...GridView 生成列表可以通过 ListView 来实现,那么同样,实现网格列表 Flutter 也提供了 GridView 来实现,实现 GridView 方法也很多...我数了下,大概 10...看命名就知道,值固定数量,这个数量是只单排数量 SliverGridDelegateWithMaxCrossAxisExtent 这个是设置最大宽度/高度,在这个值范围内取最大值,比如一排能给你排下...接下来换一种 delegate 试试效果,当然这个最大值可以根据个人喜好来设置 body: GridView( // 通过设置 `maxCrossAxisExtent` 来指定最大宽度...为了方便写法呢,Flutter 对以上两种方式进行了封装,省略了 delegate GridView.count/GridView.extent 直接看下如何修改 // 这种情况简化了 `GridView

    2.5K30

    《Flutter》-- 6.高级组件

    bool primary,//是否是与父关联主滚动视图 this.physics,//设置滚动效果 this.controller,//控制滚动位置,当primary为true时,controller...ScrollPhysics physics,//设置滚动效果 bool shrinkWrap = false,//组件是否只满足自身大小 Key center,//组件key...如果滚动方向是垂直方向,则表示组件高度;如果滚动方向为水平方向,则表示组件长度。...构造函数一共有5个: 1)GridView():默认构造函数,适用于元素个数有限场景,会一次性全部渲染children属性中元素组件; 2)GridView.builder():适用于构建大量或无限长列表...分层渲染可以降低视图渲染带来性能开销。 无论是创建组合组件还是创建自绘组件,首先需要考虑如何将复杂布局简化,把大问题拆分成若干小问题。

    10.6K20

    Flutter开发-可滚动组件

    长度”是指滚动方向上组件长度,也就是说如果滚动方向是垂直方向,则itemExtent代表组件高度;如果滚动方向为水平方向,则itemExtent就代表组件宽度。...shrinkWrap:该属性表示是否根据组件总长度来设置ListView长度,默认值为false 。默认情况下,ListView会在滚动方向尽可能多占用空间。...我们唯一需要关注是gridDelegate参数,类型是SliverGridDelegate,它作用是控制GridView组件如何排列(layout)。...上面我们介绍GridView都需要一个widget数组作为其元素,这些方式都会提前将所有widget都构建好,所以只适用于widget数量比较少时,当widget比较多时,我们可以通过GridView.builder...GridView.builder 必须指定参数两个: GridView.builder( ...

    4.5K20

    【Flutter 专题】130 图解 DraggableScrollableSheet 可手势滑动菜单栏

    SizedBox.expand(child: sheet) : sheet; }, ); } 简单分析源码 DraggableScrollableSheet 作为一个状态...StatefulWidget 小组件,通过 FractionallySizedBox 以父 Widget 为基数,可设置宽高比例容器构建内容; 案例尝试 1. builder ScrollableWidgetBuilder...构造器作为必选字段,用于在 DraggableScrollableSheet 中显示可滑动内容;其中返回内容需为可滑动 ScrollableWidget,例如 ListView / GridView...2. initialChildSize initialChildSize 用于显示初始 Widgets 所占父 Widget 比例;同时,若返回 Widget 未提供 ScrollController...& widthFactor 占父 Widget 比例即可,通过 alignment 设置所在父 widget 对齐方式; SizedBox.expand(child: _sizedBox())

    1.3K20

    Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

    / BouncingScrollPhysics→iOS下弹性效果 shrinkWrap:表示是否根据 widget 总长度设置 listview 长度,默认为 false。...指定 itemExtent 值比让元素决定自身长度在绘制时更高效,特别是在滚动位置频繁变化状态下,因为设置 itemExtent 可以让滚动系统提前知道列表长度。...,默认为 true cacheExtent:设置预加载区域,范围在窗口可见范围之前与之后。.../ BouncingScrollPhysics→iOS下弹性效果 shrinkWrap:表示是否根据 widget 总长度设置 listview 长度,默认为 false。...如果设置为 0.0,表示关闭预加载 semanticChildCount:提供语义信息孩子数量 GridView 固定列数 import 'package:flutter/material.dart

    8.7K51

    【Flutter 专题】20 图解【分享页面】底部对话框

    ---- GridView GridView 我们都很熟悉了,是日常中最常用到控件之一,和尚前段时间学习了一下 ListView 基本用法,GridView 用法基本相同,和尚不再多说,只提醒一个属性...,用来设置 GridView item 基本属性。...1.2 若此时设置内容 Widget 宽高,会发现依旧是重新打开一个页面,高度从底向上占据所设置高度,且点击空白区不会消失,如图: ?...2.2 若此时设置内容 Widget 宽高,会发现依旧是打开一个半透明页面,高度从底向上占据所设置高度,且点击空白区会消失,如图: ?...2.3 若此时设置内容 Widget 数据量很多,效果如何呢,这就是和尚选择用 GridView 原因,在现有宽高内进行可滑动操作即可,如图: ?

    1.2K71

    好大一棵树,新春祝福(二):功能节点数据结构和页面展示

    NoteLevel :表示第几级节点,可以和css配合,“美化”显示效果。 ParentIDPath: 父节点路径,用于找到一个节点节点和节点(及所有节点)。...当然这里说控件不是TreeView,而是Repeater、GridView等。 ? 【使用OrderID字段排序效果】      3、如何来显示?...对于“单列”树,我习惯使用Repeater来显示,内部采用DIV。而对于“多列”树,我们可以使用GridView控件。GridView控件树状结构在下一篇(权限选择)里面来说明。      ...因为我觉得功能节点这一块,设置成两是比较合理,客户看起来和操作起来都比较舒服,如果级数多了的话,一点迷宫感觉了。      什么?...您说您项目就是很复杂,二不够必须是三,那么怎么实现呢?两种方法:      第一种是把一节点放在上面作为导航;第二种是,把三节点做成标签形式。

    78050

    Flutter 粘合剂CustomScrollView控件

    CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果滚动组件,使用场景: ListView和GridView相互嵌套场景,ListView嵌套GridView...时,需要给GridView指定高度,但我们希望高度随内容而变化(不指定),ListView和GridView作为整体滚动效果。...相互嵌套场景 在实际业务场景中经常见到这样布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动时候做为一个整体,此场景是无法使用GridView+ListView来实现...primary设置为true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树中可滚动组件滚动行为...,系统提供ScrollPhysics: AlwaysScrollableScrollPhysics:总是可以滑动 NeverScrollableScrollPhysics:禁止滚动 BouncingScrollPhysics

    2K20

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

    一、老套路,先看样式 文章底部源码,是左侧样式,右侧是我实际开发中展示 ? ? 二、讲解(后附源码) 1.这里主要是用到GridView 组件 GridView是一个可滚动,2D数组控件。...gridDelegate参数控制控件排列,2个选择: SliverGridDelegateWithFixedCrossAxisCount:交叉轴方向上固定数量,对于垂直方向GridView来说交叉轴方向指的是水平方向...mainAxisSpacing:主轴方向上2行之间间隔。 crossAxisSpacing:交叉轴方向上之间间隔。 childAspectRatio:控件宽高比。...2.如果需要翻转滚动方向,比如从上到下,改为从下到上 需要设置属性:true表示翻转 reverse: false 3.如果需要横向滚动,设置以下属性 scrollDirection: Axis.horizontal...:Android Studio对flutter一些快捷键 5.当然通过children方式加载组件并不是个好方式 GridView提供了一些快速构建方法 ,记住以下常用两个就行 GridView.builder

    2K20

    Flutte部件目录-布局

    单子部件布局部件 多子部件布局部件 布局助手 单子部件布局部件 Container 一个方便小部件,结合了常见绘画,定位和尺寸小部件。 Padding 通过给定填充来插入其小部件。...IntrinsicHeight 一个部件,它根据孩子内在高度调整孩子大小。 IntrinsicWidth 一个部件,它将孩子尺寸调整为孩子内在宽度。...如果给定孩子,这个小部件强制它孩子一个特定宽度和/或高度(假设这个小部件父母允许这个值)。 如果宽度或高度为空,则此小部件将自行调整大小以匹配该维度中大小。...SizedOverflowBox 一个具有特定大小小部件,但将其原始约束传递给其,这可能会溢出。 Transform 绘制其之前应用转换小部件。...GridView 可滚动2D小部件阵列。 Flow 实现流布局算法小部件。 Table 为其子项使用表格布局算法小部件 Wrap 一个小部件,它以多个水平或垂直运行显示其子项。

    1.5K10

    Flutter 约束宽高比控件 AspectRatio

    尝试将子项调整为特定宽高比 widget。 widget 首先尝试布局约束所允许最大宽度。通过给定宽高比来确定小部件高度,表示为宽度与高度比率。...把宽高比设置为4:3 看一下: ? 可以看到,确实是按照我们输入比例来执行。 与GridView 联动 我们可能遇到更多需求是:在GridView 中,也要控制住每一张图片宽高比。...如果没有AspectRatio 控件则比较难实现,因为要算间距之类。 但是了 AspectRatio,我们代码就会简单很多,看一张动图: ? 可以看到,我们只需简单更改宽高比,即可自动设置。...这个时候我们就只需要设置宽高比即可设置合适宽高。 设置不符合常理宽高 前面我们设置都是符合常理宽高。 比如,我们限制了外部容器宽高都为100。...这个时候AspectRatio会根据当前最高值自动再计算一次宽高比,算出来宽应为50。 我们可以使用刚才GridView 来实现这个猜想,因为GridView宽高就是限制好

    2.8K10
    领券