首页
学习
活动
专区
工具
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.7K20
  • Flutter可滑动组件

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

    7.2K30

    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

    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》-- 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.7K20

    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.4K20

    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.8K51

    【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控件的树状结构在下一篇(权限选择)里面来说明。      ...因为我觉得功能节点这一块,设置成两级的是比较合理的,客户看起来和操作起来都比较舒服,如果级数多了的话,有一点迷宫的感觉了。      什么?...您说您的项目就是很复杂的,二级的不够必须是三级的,那么怎么实现呢?有两种方法:      第一种是把一级节点放在上面作为导航;第二种是,把三级节点做成标签的形式。

    78750

    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

    Flutter中构建布局 顶

    Flutter的布局机制如何工作。 如何垂直和水平布局小部件。 如何构建一个Flutter布局。 这是在Flutter中构建布局的指南。 您将构建以下屏幕截图的布局: ?...行和列是两种最常用的布局模式。 行和列分别获取子窗口小部件的列表。 子小部件本身可以是行,列或其他复杂小部件。 您可以指定行或列如何在垂直和水平方向上对齐其子项。 您可以拉伸或限制特定的子部件。...渲染盒(在这种情况下,整个屏幕)的高度大于300像素,因此将主轴对齐设置为spaceEvenly将自由垂直空间均匀分配在每个图像之间,之上和之下。...使用GridView.count在纵向模式下创建2个宽度的网格,在横向模式下创建3个宽度的网格。 标题是通过设置每个GridTile的页脚属性创建的。...Card摘要: 实现材料设计卡片 用于呈现相关信息的块 接受单个孩子,但该孩子可以是Row,Column或其他包含子级列表的小部件 显示圆角和阴影 卡片的内容不能滚动 来自材料组件库 卡片示例: ?

    43.1K10

    Flutte部件目录-布局

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

    1.5K10
    领券