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

如何制作3*3个像矩阵一样的容器,使用容器中的行边距为30,我是flutter的初学者

在Flutter中,可以使用GridView来制作一个3x3的像矩阵一样的容器,并设置行边距为30。下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grid Example'),
        ),
        body: GridView.count(
          crossAxisCount: 3, // 列数为3
          mainAxisSpacing: 30, // 行边距为30
          crossAxisSpacing: 0, // 列边距为0
          children: List.generate(9, (index) {
            return Container(
              color: Colors.blue, // 容器的背景颜色
              child: Center(
                child: Text(
                  'Item ${index + 1}',
                  style: TextStyle(
                    color: Colors.white, // 文字颜色
                    fontSize: 20, // 文字大小
                  ),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

在上述代码中,我们使用了GridView.count来创建一个网格布局,通过crossAxisCount属性设置列数为3,mainAxisSpacing属性设置行边距为30。children属性是一个包含9个子组件的列表,通过List.generate方法生成了9个容器,每个容器都有一个蓝色的背景和居中的文本。

你可以将上述代码复制到Flutter项目中运行,就可以看到一个3x3的像矩阵一样的容器,行边距为30的效果。

关于Flutter的更多信息和学习资源,你可以参考腾讯云的Flutter开发文档:Flutter开发文档

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

相关·内容

经典布局:如何定义子控件在父容器排版位置?

在这个示例将一段较长文字,包装在一个红色背景、圆角边框、固定宽高Container,并分别设置了Container外边(距离其父Widget)和内边(距离其子Widget)...需要注意,为了实现居中布局,Center所占据空间一定要比其子Widget要大才,这也是显而易见:如果Center要和其子Widget一样大,自然就不需要居中,也没空间居中了。...如同AndroidLinearLayout、前端Flex布局一样Flutter也有类似的概念,即将子Widget按水平排列Row,按列垂直排列Column,以及负责分配这些子Widget在布局方向剩余空间...需要注意,对于主轴而言,Flutter默认让父容器决定其长度,即尽可能大。 在上例,Row宽度屏幕宽度,Column高度屏幕高度。...需要注意,Positioned控件只能在Stack中使用,在其他容器使用会报错。 总结 Flutter布局容器强大而丰富,可以将小型、单用途基本视觉元素快速封装成控件。

4.5K30

一、首页第一个首页栏制作【仿淘票票系统前后端完全制作(除支付外)】

首页一共分为3个页面,分别是首页: 影院: : 一、标题头制作 首先我们新建一个 web 相对应用,随后点击前台,在前台新建一个页面: 接着给予这个页面一个背景色: 为了使页面清晰...,此时添加元素才有靠右显示: 接着添加一个正在热映文本,该文本需要设置其排版,上下左右内边,否则无法设置其框: 接着在这个文本边框与圆角处设置下边颜色为主题色(紫红色...),只有下边生效,其他都设置空即可: 那么此时标题栏即可完成: 二、影片内容制作 标题头做完后就到了影片内容制作部分,影片内容布局如下图框选所示: 从图中我们可以看到,...接着由于我们内容需要与上下左右边缘有一定距离,那么此时直接设置内容内边即可统一其元素自带效果,此时设置这个内容如下: 接着再内容创建一个,命名为热映内容,这个热映内容也就是包裹单独一个影片信息...即可占满整行: 接着右侧信息内部也分为左侧和右侧 ,左侧影片信息,右侧按钮购买,那么此时创建两个行为这些内容容器,并且给予命名: 此时左侧信息 70% 右侧购票 30%

8.6K20

Flutter构建布局 顶

Flutter布局机制如何工作。 如何垂直和水平布局小部件。 如何构建一个Flutter布局。 这是在Flutter构建布局指南。 您将构建以下屏幕截图布局: ?...将第一文本放入Container可以添加填充。 列第二个子项(也是文本)显示灰色。 标题最后两项一个红色星形图标和文字“41”。 将整行放在容器,并沿着每个边缘填充32像素。...容器一个小部件,允许您自定义其子部件。 如果要添加填充,,边框或背景色,请使用容器来命名其某些功能。 在这个例子,每个文本小部件放置在容器以添加。...容器概要: 添加填充,,边框 更改背景颜色或图像 包含单个子部件,但该子部件可以是Row,Column,甚至部件树根部 ?...每个图像使用一个Container来添加一个圆形灰色边框和。 包含图像使用容器将背景颜色更改为浅灰色。

43K10

通过动图学习 CSS Flex

为了巩固你对flex了解,制作了这些动画演示。 注意 overflow: hidden 行为类型默认值,因为 flex-wrap 还未设置。...使用 space-around 属性(下图)所有项目的相同。 space-around下面这个动画相同例子,只不过 middle 元素更宽一些。...项目与相等垂直空间对齐。 当然,你仍然可以修改父级高度,并且所有内容仍然可以正确对齐。 实际应用情况 在实际布局,你不会有一长串文字,你将会使用一些独特内容元素。...到目前为止只简单演示了动画中 flex 如何工作。 当涉及到实际布局时,你可能希望对较少同时更大项目使用 flex。就像真正网站上那些内容一样。...请注意,因为此示例项目数 奇数个(5),所以这种情况不会产生你想要那种理想响应效果。使用偶数数字可以解决这个微妙问题。

1.3K40

Flutter lesson 5: Flutter组件之基础组件(一)

padding设置元素内边,margin设置元素外边。以一个矩形盒子例,四条边框边界,边框以外外边,边框以内内边。...不同于前端Flutter添加需要使用到EdgeInsets对象。...## transform `transform`在CSS3使用也是非常多,也包含位移,旋转,缩放等功能。...但是使用方法也是和CSS3略有不同。CSS3不仅支持关键词还支持`Matrix`矩阵,而Flutter中一般就使用`Matrix4`。 !...还可能用到属性就是fit属性。这个有点CSS3background-size属性,可以设置BoxFit.cover,用到类就是BoxFit。其他属性就不多说,基本使用默认值就可以。

2.1K30

四、博客详情页完成《iVX低代码仿CSDN个人博客制作

,咱们直接放到博文之下进行显示即可;顶部标题需要注意,不是只限于俩,因为这是博文详情页,顶部标题肯定是需要显示完毕,接下来就是发布时间和点赞,点赞在此需要制作,接着往下一个作者信息,在此咱们只需要制作一个头像和右边昵称即可...,因为这是个人博客并不涉及关注内容,接着下面富文本内容,富文本我们需要使用富文本容器进行显示,在此处咱们使用富文本框进行代替,在之后内容编写时在进行对应赋值即可。...,在此我们只需要设置当前博文头部高度包裹、背景色透明即可: 由于头部标题本身上内边有一定距离,在此设置这个上内边以及距离顶部一段距离,这样才可以使上部分有一个隔断颜色...,当然你也可以设置样式达到同样效果: 接着设置内边: 此时页面效果如下: 接着往这个添加一个命名为标题,同样设置高度包裹背景色透明: 由于标题还距离左右两侧有一定...,并且接下来所有内容都距离左右有一定边,此时直接设置父容器左右内边最方便方法: 直接设置主要内容内边: 接着往标题添加文本,设置字体大小以及文本组件宽度100%:

1K40

组合与自绘,该选用何种方式自定义Widget?

在实际开发,我们经常会遇到一些复杂UI需求,往往无法通过使用Flutter基本Widget,设置其属性参数来满足。这个时候,我们就需要针对特定场景自定义Widget了。...这种方式,对外暴露接口比较少,减少了上层使用成本,但也因此增强了控件复用性。在Flutter,组合思想始终贯穿在框架设计之中,这也是Flutter提供了如此丰富控件库原因之一。...接下来,通过一个例子你说明如何通过组装去自定义控件。 下图AppStore升级项UI示意图,图里每一项,都有应用Icon、名称、更新日期、更新简介、应用版本、应用大小以及更新/打开按钮。...在这里为了方便讨论,将所有属性都定义为了字符串类型,你在使用可以根据需要将属性定义得更规范(比如,将appDate定义DateTime类型)。...通过与拆解前UI对比,你就会发现还有三个问题待解决:即控件间如何设置,中间部分伸缩(截断)规则又是怎样,图片圆角怎么实现。接下来,我们分别来看看。

1.8K20

Flutter —快速开发IDE快捷方式

历史上今天 包拯(999年-1062年7月3日),字希仁,庐州合肥(今安徽合肥肥东)人,北宋名臣。 天圣五年(1027年),包拯登进士第。累迁监察御史,曾建议练兵选将、充实备。...Flutter 初学者,那么您一定厌恶嵌套结构,在代码添加或删除一个小部件,或者找到一个小部件在何处结束、何处开始多么困难。...将自动您创建所有样板代码。 使用Alt + Enter可以执行更多神奇事情 Alt + Enter用于在Flutter中加快开发速度魔杖。...轻松复制粘贴或剪切粘贴一代码 您可以轻松地剪切/复制一代码,只需将光标保持在该行末尾,然后按Ctrl + X或Ctrl + C方式粘贴并通常一样粘贴(Ctrl + V) Ctrl+X Ctrl...将代码提取到方法 Flutter Outline一个非常有用工具。

2.1K20

Flutter | 容器组件

Padding 走了一个内边,目的防止贴屏幕右侧 其他容器限制类 除了上面介绍容器外,还有一些其他尺寸限制类容器,例如: AspectRatio :可以知道子组件长宽比 LimitedBox...UI 变化,而不是重新 build 流程,这样会节省 layout 开销,所以性能会比较好,例如 Flow 组件,内部就是使用矩阵变换来更新 UI ,除此之外,Flutter 动画组件也大量使用了..., ), 复制代码 效果和 Android padding/margin 差不多,padding 内边,margin 外边 事实上,Container 内 margin 和 padding...TabBar tabs 属性接受一个 Widget 数组,表示每一个 Tab 子菜单,我们可以自定义组件样式,也可以例子中一样直接使用 Tab 组件 Tab 组件有三个可选参数,除了可以知道文字外..., 图片大小 80*80,我们返回区域 Rect.fromLTWH(10, 15, 40, 30) , 即图片中 40 * 30 像素范围 shouldReclip 是否重新剪裁,如果在应用

5.4K10

前端学习笔记之CSS属性设置 CSS属性设置

但其实一次请求带宽就足够容纳10张图片大小 精灵图作用就是用来较少请求次数,以及降低服务器处理压力 #3如何使用CSS精灵图 CSS精灵图需要配合背景图片和背景定位来使用...在企业开发要尽量降低网页体积,图片越多,体积肯定越大,访问速度肯定越慢,所以针对简单图形,可以只用用边框画出来 使用下面的方法制作就可以 */ .box6...只能让一内容垂直居中,如果想让多行内容垂直居中, 比如下面这种,想让div多行内容垂直居中,一看div文字,每一 20,加起来就是40,80-40=40,需要让文字距离顶部pading... 7、清除默认 #1、为什么要清空默认(外边和内边) 浏览器会自动附加,在企业开发为了更好控制盒子宽高和计算盒子宽高等等 编写代码之前第一件事情就是清空默认...#2、如何清空默认 * { margin: 0px; padding: 0px; } #3、注意点:

5.8K30

WPF入门到放弃(三)| 制作串口调试助手

一是因为相信技术总是需要不断总结与练习才能有所进步,二希望帮助初学者对WPF有个初步了解,大家一起探讨学习进步。...软件下载地址: https://visualstudio.microsoft.com/zh-hans/vs/ 这里使用Visual Studio 2019 社区版 第3讲 做串口调试助手界面...制作中用到控件会简单介绍。 初级阶段认为还是用到什么学什么,光介绍不同控件,语法可能学完了还是不知道能干什么,在实践不断总结,练习,才能有所进步。...默认从00列开始,如果有0或者0列可以不用Grid.Row和Grid.Column附加属性设定子元素在单元格位置。...ComboBox 表示带有下拉列表选择控件 Grid.Column="1" Name="Portname" Margin="10" Name给控件起个名字,方便在代码处使用,Margin 约束控件与容器控件

1.4K30

Flutter 入门指北之常用布局

// child 和 Container Color color, // Container 背景色 Decoration decoration, // 样式,可以设置背景图,...BoxConstraints constraints, // 默认使用 BoxConstraints.tightFor,可以手动传入 this.margin, // Container 同上层容器...this.transform, // 个 Matrix4 矩阵,(嗯..这个参数基本很少用,没怎么了解 /捂脸) this.child, // 需要展示内容 }) // .....Flex,Row,Column 写 Android 小伙伴应该比较常用 LinearLayout,在 Flutter 中用两个部件,Row Column来代替 Android LinearLayout...种比较特殊对齐方式,前端小伙伴会了解, // spaceAround 两个部件之间间隔部件和上层容器间隔两倍 // spaceBetween 两侧部件同上层容器间隔 0,部件之间间隔相等

65420

分享 10 个 常用且必须要掌握 CSS 知识点

简单来说,CSS 盒模型一个包含多个组件容器,包括边框、、内边和内容本身。 总之,它是一个用于自定义不同元素布局 CSS 工具包。...4、元素边界之外空间。它在相邻元素之间创建了一个空间。...CSS 网格布局在将大型网页划分为小组件并根据大小、位置和优先级或重要性定义这些组件之间关系方面做得非常出色。 此外,CSS 网格布局有点类似于表格,因为它表格一样将大布局划分为和列。...例如,如果一个项目的 grid-column 属性设置 1 / 5,这意味着该项目从网格列第 1 开始,到网格列第 5 结束。可以使用 1/ span 4 这样跨度来编写相同内容。...唯一区别是它们在本地范围内声明如何在 SAAS 声明和使用变量?

6.8K10

《iVX 高仿美团APP制作移动端完整项目》04 美食页 标题、搜索、商家标题制作

;接着咱们在右侧添加一个文本,并且给予对应文本美食: 随后在设置左行宽度包裹: 右行宽度撑开: 此时右行与左行将会共同占据这一,其原因右行撑开将会把剩余空间给占据...二、内容页制作 2.1 内容页外框架确定 我们先看内容页外部框架整体布局: 由此我们值,该内容包裹在一个容器内,该容器背景色白色,那么我们在此需要创建一个容器,并且设置其高度包裹、背景色偏白色...: 2.2 搜索框制作 接着我们需要制作搜索框内容: 我们在内容下创建一个,命名为搜索框,并且设置背景色透明、高度包裹以及水平垂直居中: 接着咱们在搜索框创建两个元素,一个输入框一个按钮...此时先创建一个,并且在行内再创建一个: 这样进行操作使用外面商家设置内边控制间隔: 对应内部也需要设置对应内边: 接下来创建两个,一个叫做封面一个叫做信息...接着咱们在商家下创建一个绝对定位容器,设置其高度 60,在其内部创建一个图片: 那如何使其覆盖到下面呢?

94820

二、博客首页完成《iVX低代码仿CSDN个人博客制作

二、轮播图制作 菜单栏之后一个轮播图: 该轮播图占据整行,并且自动进行滚动,那如何制作呢?需要通过和图片自己设置吗?...增加文本内容有两个方式,其中一种在这个轮播容器之下新建一个,在这个添加对应文本。那你可能问,创建一个不就在下面显示了,如何可以显示在当前轮播也之上呢?...其实咱们有很多作用,例如在行设置内容后,设置上上外边负,那么此时就可以往上移动,这样就可以覆盖在这个轮播容器之上了,但是文本却不能进行轮播,这种方法需要额外制作很多事情,例如你要设置动画...,几秒播放一次,这个还好,更加麻烦你还需要设置鼠标拖动时你要如何进行响应,这并不是很划算,在此只是提供一个不一样思路,咱们现在在这个轮播页添加文本还是要从整个轮播容器中进行添加。...轮播容器轮播页一个页面,那么一个页也是一个容器,所以咱们可以在这个轮播容器添加文本内容,但是这个文本内容你还需要控制,最好方法就是添加一个,设置其内边以及一个对齐方式,这样就可以很方便控制文本了

1.4K30

CSS技巧和经验

如何让单行文本在容器内垂直居中 #test { height: 25px; line-height: 25px; } // 只需设置文本高...如何使文本溢出边界不换行强制在一内显示 #test { width: 150px; white-space: nowrap; } // 设置容器宽度和...--透明容器--> 不透明内容 // 原理容器层与内容层并级,容器层设置透明度,内容层通过负margin或者...该方法优点在于结构简洁,不理想地方:1.由于使用场景不同,负缩进值可能会不一样,不易抽象成公用样式;2.当该元素链接时,在非IE下虚线框将变得不完整;3.如果该元素被定义内联级或者内联块级,不同浏览器下会有较多差异...10px,box2顶部margin20px,但表现在页面上2者之间间隔20px,而不是预想10+20px=30px,结果选择2者之间最大那个margin,我们把这种机制称之为“外边合并

2.3K70

三、博客首页完成《iVX低代码仿CSDN个人博客制作

,这些内容主要是分为标题作者以及阅读: 从以上截图可知,这个内容块有一个内边,该内容创建一个用于显示标题,之后设置一个,内容作者和阅读数,这两个内容占据一并不进行换行,在此右侧×...二、首页内容制作 分析完毕后此时我们创建一个,命名为内容,用于包裹所有内容块: 接着设置这个内容块高度包裹,高度将随着当前内部内容增加而增加: 你可能会疑问,为啥不设置内边...其实你可以统一在这里设置内边,但是选择在内容设置内容,这样可以更清楚看见这些内容适应于内边样子,又或者根本不用设置内边。...,背景色透明: 接着更改这个标题宽度 80%,然后设置整个博文水平对齐居中,这样不就可以自动有内边了吗?...,其内容也随着容器变动: 接着在这个信息添加两个文本设置好大小和文本此时效果如下: 此时内容应该上下还有内边,在这里我们需要设置父容器博文高度垂直居中即可: 此时效果如下

92520
领券