文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Flutter | ConstrainedBox & UnconstrainedBox 组件

前言 在 Flutter 当中，我们如何控制组件的大小？套上一层 Container？SizeBox？还是一些别的技巧？...然而，当你运行的时候： ? WTF？？我 200*200 的大方块呢？怎么变成长方形了？ ? 难道不应该是这样的吗？ ? 好，带着这个问题，我们就来说今天的两个主角。...注意：这里并不打算深入讨论 Flutter 中约束的机制，只是为了讲解这两个控件。 看本篇文章时我们只需要记住：child 尺寸大小是由父级 Widget 给出的约束来调整的。...在其 child 上添加约束的 widget。 例如，如果你希望 child 最小高度为 50.0 像素，可以用 BoxConstraints(minHeight: 50.0) 来进行约束。...在我们开头举的例子，为什么我设置 200*200 的Container默认是屏幕宽度的？ 因为ListView这种类型的组件会根据滑动方向来设置约束。

1.2K10

Flutter你竟是这样的布局

---- 当学习Flutter的人问你，为什么宽度为100的某些小部件在显示的时候，宽度不为100像素时，你的默认答案是告诉他们将小部件放在Center内，对吗？ 不要这样做。...Widget一个接一个地告诉其孩子约束（每个孩子可能有所不同），然后询问每个孩子想要的大小，然后，Widget将其孩子定位（水平地在x轴上布局，垂直地在y轴上布局），最后，该小部件将其自身的大小告诉父级...Widget： 嗯，因为我要有5像素的Padding，所以我的子Widget最多可以有290像素的宽度和75像素的高度。...Scaffold告诉容器它可以是所需的任何大小，但不能大于屏幕大小。 注意：当Widget告诉其子Widget它可以小于特定大小时，我们说该Widget为其Child提供了loose约束。...每个Widget在应用一般规则时都有很大的自由度，因此无法仅通过读取Widget的名称就知道可能会做什么。 如果你尝试猜测，可能会猜错。

3.1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Flutter之drawer详细分析（你要的操作都有）

    简介 这篇文章主要讲解有关drawer的一切。 另：接Flutter相关项目，需要的私信或通过QQ：708959817，联系我 2....初探 我们先来看看简单的drawer在Flutter的应用 class HomePage extends StatefulWidget { @override _HomePageState createState...image.png 可以直接点击ListView的构造方法，跳转到455行可看到 1.当ListView的属性padding为空时，获取MediaQueryData的信息 2.因为ListView...image.png 可以看到，Flutter是有一个DrawerController的,然后我们就将DrawerController添加到我们的_drawer中去 @override Widget...image.png 诶，可以看到，每次的打开会触发initState，每次的关闭会触发dispose，这个不就是我们一直想要的Drawer打开和关闭吗？

    4.9K21

    6详解AppBar小部件

    由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...以下是 Flutter 中默认的 AppBar 的样子： // Mostly, AppBar is used inside a Scaffold widget....背景颜色 以下代码将 AppBar 的背景颜色更改为深橙色。500添加以访问颜色的特定阴影，900即最暗和最亮50。...关于 Flutter 的 AppBar 必须提供的所有内容的完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮的 AppBars。...，高度和 AppBar 高度一样， // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用 this.bottom,//一个 AppBarBottomWidget

    21.2K10

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

    父项：你的宽度必须在 90 到 300 像素之间，高度在 30 到 85 像素之间。 Widget：我想有 5 像素的 padding，所以我的子项最多有 290 像素的宽度和 75 像素的高度。...Widget：你好第一个子项，你的宽度必须在 0 到 290 像素之间，高度在 0 到 75 像素之间。 第一个子项：好的，那么我希望自己的宽度是 290 像素，高度为 20 像素。..., ]) 当一个 Row 子项包装在一个 Expanded widget 中时，Row 将不再允许该子项定义自己的宽度。...注意：当 widget 告诉其子项可以小于某个特定大小时，我们说该 widget 为其子项提供了“宽松”的约束。稍后会进一步说明。...每个 widget 在应用通用规则时都有很大的自由度，因此只看 widget 的名称是没法知道它会做什么事情的。 如果你只靠猜测的话可能会猜错。

    2.3K20

    Flutter入门指北（Part 8）之Sliver 组件及NestedScrollView

    ，当有下滑手势的时候，就会显示 AppBar // floating: true, // 该属性只有在 floating 为 true 的情况下使用，不然会报错...会占有一个屏幕的高度， // 可以在 child 属性加入需要展示的部件 SliverFillRemaining( child: Center(child: Text...，1.0 为一个屏幕大小 }) 如果一个滑动列表，每个 item 需要占满一个屏幕或者更大，可以使用该部件生成列表，但是如果 item 的高度小于一个屏幕高度，那就不太推荐了，在首尾会用空白 item...SliverPersistentHeader Flutter 中，为我们提供了这么一个作为头部的部件 SliverPersistentHeader，这个部件可以根据滚动的距离缩小高度，有点类似 SliverAppBar...child, }) 糟透了的翻译 X 7：创建一个和指定的 handle 一样高度的 sliver 部件，这个 handle 同 SliverOverlapAbsorber 的 handle 保持一致即可

    2.8K30

    UITableView在Flutter中是什么？

    在这个例子中，我们一次性创建了6个子Widget。但是从上图的运行效果可以看到，由于屏幕的宽高有限，同一时间用户只能看到3个Widget。...所以，考虑到创建子Widget产生的性能问题，更好的方法是抽象出创建子Widget的方法，交由ListView统一管理，在真正需要展示该子Widget时再去创建。...当列表滚动到相应位置时，ListView会调用该方法创建对应的子Widget。 itemCount，表示列表项的数量，如果为空，则表示ListView为无限列表。...因为如果这个参数为null，ListView会动态地根据子Widget创建完成的结果，决定自身的视图高度，以及子Widget在ListView中的相对位置。...flexibleSpace 可以让背景图显示在SliverAppBar下方，高度和SliverAppBar一样； 而在创建SliverList时，通过 SliverChildBuilderDelegate

    7.9K10

    【译】Flutter架构综述

    在每个渲染帧上，Flutter可以通过调用该widget的build()方法，仅仅重新创建UI中状态已经改变的部分。...您可以使用 InheritedWidget 来创建一个状态小组件，该小组件在小组件树中包装一个共同的祖先，如本例所示。 ?...MaterialApp build()方法在构建时，会在树中插入一个主题，然后在更深的层次结构中，一个widget可以使用.of()方法来查找相关的主题数据，例如。...例如，他们可能只是将他们想要渲染的东西放在中心位置，并将其限制在规定的约束范围内）。) 父母可以规定孩子的宽度，但给孩子高度上的灵活性（或规定高度但提供灵活的宽度）。...相反，当你准备为web创建一个生产应用时，使用dart2js，Dart的高度优化的生产JavaScript编译器，将Flutter核心和框架与你的应用一起打包成一个最小化的源文件，可以部署到任何web服务器

    6.9K10

    滑动卡组件

    在在本博客中，我们将探讨「Flutter中」 的**滑动卡。**我们还将实现一个演示程序，并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。...用户可以轻松地将任何内容添加到卡中以使用Flutter应用程序。 该演示视频展示了如何在Flutter中创建滑动卡。...它显示了如何在flutter应用程序中使用「slide_card」软件包来使用滑动卡。它显示了一张纸牌的弹跳动画，该动画分成两个打开的不同纸牌。它会显示在您的设备上。...**hiddenCardHeight：**此属性用于使隐藏卡的高度小于或等于frontCard小部件的90％。 「frontCardWidget」：此属性用于在正面显示的小部件。...，「controller」，「slideCardCardWidth」是整个卡的宽度，「visibleCardHeight」是前卡的高度，「hiddenCardHeight」是后卡的高度，不能大于正面卡的高度

    3.5K60

    Flutter中的Key详解

    在Flutter中，几乎每一个Widget都有一个key。虽然我们在日常的开发中极少会使用到这个key，但是实际上key的存在是很有必要的。那么key到底是什么？它有什么作用？...踩过的坑 对于一个List列表，比如说银行卡列表、新闻列表等，列表中的单个元素的UI组件我们一般是要对其进行封装复用的，这样的话，在循环引用的时候就会出现很多同级的该Widget实例。...我在在Widget，构建Flutter界面的基石中详细介绍过Widget、Element、RenderObject，这里再简单描述下： 1，Widget，主要用来配置组件的不可变信息，如上面例子中的颜色信息...2，Element，在创建Widget的时候都会在对应的位置上创建一个Element（对于Stateful类型的widget来说，state就是存储在Element中的），Element又会根据widget...Widget一致的新的Widget，那么该Element还是会被保存下来复用，并重新建立Element和新widget位置的对应关系；相反，如果没有找到一致的，那么旧的Element就会被销毁而重新创建

    3K31

    端开发技术——解密Flutter响应式布局

    Flutter是一个跨平台的应用开发框架，支持各种屏幕大小的设备，它可以在智能手表这样的小设备上运行，也可以在电视这样的大设备上运行。使用相同的代码来适应不同的屏幕大小和像素密度是一个挑战。...Flutter响应式布局的设计没有硬性的规则。在本文中，我将向您展示在设计响应式布局时可以遵循的一些方法。...在使用Flutter构建响应式布局之前，我想说明一下Android和iOS是如何处理不同屏幕大小的布局的。 1....记住，在Flutter中，每个屏幕和整个应用程序也是一个widget! widget本质上是可重用的，因此在Flutter中构建响应式布局时，您不需要学习任何其他概念。...您可以看到，在Flutter中创建分屏视图是非常容易的，您只需使用一行将它们并排放置，然后为了填满整个空间，只需使用Expanded widget包装两个视图。

    3.2K00

    Flutter | 滚动组件，ListView，GridVIew等

    ，在 Flutter 中，术语 ViewPort (视口) ，如无特别说明，则是指一个 Widget 的实际显示区域； 例如，一个 ListView 的显示区域的高度是 800 像素，虽然其列表项总高度可能远远超过...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ，如 false 时，初始位置在头，反之则在 尾 primary：指是否使用 widget 树中默认的 PrimaryScrollController...这种方式只适合有少量的子组件的情况，因为这种需要将所有 children 都提前创建好（这需要大量的工作），而不是等子 widget 真正显示的时候在创建，也就是说默认构造函数构建的 ListView...当列表滚动到具体的 index 位置时，会调用该构建起构建列表项。...数量较小的时候，当 widget 比较多的时候，可以通过 GridView.builder 来动态创建子 Widget。

    10.2K20

    Flutter(八)--Flutter渲染逻辑+源码解读Flutter(八)--Flutter渲染逻辑+源码解读

    ： 我们在屏幕上看到的就是以Widget为依据渲染的吗？...我们开发中创建的每一个Widget都会被渲染到屏幕上吗？ 带着这三个问题，开始这篇文章，阅读大概需要8-10分钟。...，通过查找发现createElement是Flutter在widget创建之后隐式调用的，通过该方法创建Element并加入Element树，所有的Widget都会创建对应的element。...我们为什么可以在State中使用widget； ComponentElement中有一个mount方法,这个方法类似Widget中的createElement都是Flutter自行调用，我们只需知道Element...以及窥探到一些这样设计的’妙‘，比如elementTree的中间者模式，尤其是在页面更新时体现的更加明显。 下一篇就是我对Flutter中的页面更新逻辑的一些自己的理解。

    1.8K10

    Flutter原理：三棵重要的树(渲染过程、布局约束、应用视图的构建等)

    在 flutter 中，Container、Text 等组件都属于 Widget，所以我们将这种树称为 Widget 树，也可以叫做控件树，它就表示了我们在 dart 代码中所写的控件的结构。 ?...，当我们第一次调用 build() 方法想要在屏幕上显示这些组件时，Flutter 会根据这些信息生成该 Widget 控件对应的 Element，同样地，Element 也会被放到相应的 Element...Flutter 的渲染过程由用户的输入开始，当接受到用户输入的信号时，就会触发动画的进度更新，例如我们第一次渲染时的启动动画，或者我们在滚动手机屏幕时单个列表项复用时的移动动画。...每次，当控件挂载到控件树上时，Flutter 调用其 createElement() 方法，创建其对应的 Element。...Flutter 中的 Widget 一直在重建，每次重建之后，Element 都会采用相应的措施来确定是否我对应的新控件跟之前引用旧控件是否有所改变，如果没改变则只需要做更新操作，如果前后不同则会重创建

    2.6K40

    flutter 起步

    flutter简介Flutter是谷歌的移动UI框架，可以运行在ios与android系统上，可以以完成app的开发，使用情况页面大多数涉及到flutter 开发的app 都是混合开发，占比并不多。...基本上都是原生+Flutter的混合开发模式，不是使用纯Flutter开发的起步基于dartdart 不用单独安装，flutter 会自带环境，且dart 语言较简单，可以在flutter的使用中学习安装环境...中的继承也有和Java不一样的地方：Flutter中的子类可以访问父类中的所有变量和方法，因为Flutter中没有公有、私有的区别上下文对象是整个APP Widget树结构中的Widget话柄，每个Wideget...全局变量和静态成员变量，这些变量不会在热刷新时更新。修改了main函数中创建的根控件节点，Flutter在热刷新后只会根据原来的根节点重新创建控件树，不会修改根节点。...flexibleSpace → Widget - 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用。

    6.4K20

    Flutter 改善套娃地狱问题（仿喜马拉雅PC页面举例）

    思考了很久，想寻找一个合适demo页面，周末时在听喜马拉雅里面的盗墓小说，看了看发现页面，发现整体样式不错，咱就仿一个吧！而且整体的页面复杂度，也足够来演示了！...项目地址：flutter_use 说明 代码已经发布到Github上，web端也已经部署好了，因为使用的CanvasKit模式打包的，首次加载可能比较慢，多等一会，因为Web端部署在Github上，访问的话...，这个问题我也在几台电脑上，调了好久才发现的。...建议各位彦祖，下载下window安装包，安装体验下；MacOS的于晏们，你们可以看看web展示效果。 咱们马上来看看怎么搞规范代码吧！复杂的模块，让你的代码也能高度可维护！...立马变的清爽N倍 大家在写Flutter的时候，应该能明显的感觉到，写页面拥有高度的自由，样式、页面结构及其逻辑全都能耦合在一起。

    2.2K71

    Flutter完整开发实战详解(九、 深入绘制原理)

    所以在 Flutter 中，最终页面的 Layout、Paint 等都会发生在 Widget 所对应的 RenderObject 子类中，而 RenderObject 也是 Flutter 跨平台的最大的特点之一...如下图所示，所有的 RenderObject 子类都必须实现 paint 方法，并且该方法并不是给用户直接调用，需要更新绘制时，你可以通过 markNeddsPaint 方法去触发界面绘制。 ?...的构造方法是 @protected，只在 PaintingContext.repaintCompositedChild 和 pushLayer 时自动创建。...事实上，因为正常 Flutter 在绘制 Container 的时候，AppBar 已经帮我们计算了状态栏和标题栏高度偏差，但我们这里在用 Canvas 时直接粗暴的 drawRect，绘制出来的红色小方框...其实这里的问题还是在于 PaintingContext ，它有一个参数是 estimatedBounds ，而 estimatedBounds 正常是在创建时通过 child.paintBounds

    1.4K10

    -StatefulWidget的打开方式

    0.前言 刚接触Flutter的小伙伴在StatefulWidget控件时会感觉难以接受 本人一开始也是,不过对React的了解让我很快理解了Flutter的状态观念 本篇就说一下我对StatefulWidget...里控件修改其属性可以直接`对象.set属性`来设置 但在FLutter里你会奇怪的发现:当你`slider.value=20;`时会报错 这真是让人不爽，对象更改属性不是天经地义吗?...,如下:有一个私有的变量_value， 在Slider拖动的过程中执行_render方法进行渲染,在渲染时先将Slider的值给_value 在setState方法调用之后，build将会重新执行，...所以编程对我而言就是在创世,而我便是创世神,思想的高度可以让你的眼前有一个完全不一样的世界。 话说回来,为什么要这样做呢?...，一个Slider滑动时Text跟随显示,在Activity中创建两个对象，让两者协调, 一两个还好，多了就会感觉分布零散，而且冗余难看,为此自定义一个View？

    1.4K10

    Flutter 视图布局-前言

    在 Flutter 中主要的布局方式有两种： 多子类元素布局 单子类元素布局 还有一个比较特殊的 LayoutBuilder，这个主要是构建一个可以依赖父窗口大小的 Widget 树。...Wrap 可以在水平或垂直方向多行显示其子元素。 Flow 一个可以实现流式布局算法的 Widget。 Stack 可以允许其子元素简单的堆叠在一起。...Center 将其子元素居中显示在自身内部的 Widget。 Align 一个 Widget，它可以将其子元素对齐，并可以根据子元素的大小自动调整大小。...Transform 在绘制子元素之前应用转换的 Widget。 Offstage 一个布局 Widget，可以控制其子元素的显示和隐藏。...如果宽度或高度为NULL，则此 Widget 将调整自身大小以匹配该维度中的孩子的大小。

    2.9K110
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券