Flutter:如何在其父控件内部使用宽高比的widget？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

【Flutter实战】定位装饰权重组件及柱状图案例

这些组件的使用频率非常高，下面一一介绍，最后给出项目中实际案例熟悉其用法。...'), alignment: Alignment.center, ) 注意：设置对齐方式后，Container将会充满其父控件，相当于Android中 match_parent...不，不会，子控件依然会受到父组件的约束，会扩展到父组件的尺寸，还有一个便捷的方式设置此方式： SizedBox.expand( child: Text('老孟，专注分享Flutter技术及应用'),...，可以控制 Row、Column、Flex 的子控件如何布局的组件。...大家是否还记得 Container 组件的大小是如何调整的吗？

1.6K1 0

Flutter 约束宽高比的控件 AspectRatio

在搭建 UI 的过程中，经常会出现要求约束宽高比的需求。比如，把照片变成 16:9 或者 4:3 ，这个时候你会怎么做？是动态设置？还是写死宽高？...为此，Flutter 为我们提供了可以约束宽高比的控件 AspectRatio。...尝试将子项调整为特定宽高比的 widget。 widget 首先尝试布局约束所允许的最大宽度。通过给定的宽高比来确定小部件的高度，表示为宽度与高度的比率。...还是一样没有demo，不过这种控件使用起来是比较简单的，直接来看构造函数： const AspectRatio({ Key key, @required this.aspectRatio,...把宽高比设置为4:3 看一下： ? 可以看到，确实是按照我们输入的比例来执行的。与GridView 联动我们可能遇到更多的需求是：在GridView 中，也要控制住每一张图片的宽高比。

3.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

经典布局：如何定义子控件在父容器中的排版位置？

在Flutter中，一个完整的界面通常就是由这些小型、单用途的基本控件元素依据特定的布局规则堆砌而成的。...这些布局类的Widget，内部都会包含一个或多个子控件，并且都提供了摆放子控件的不同布局方式，可以实现子控件的对齐、嵌套、层叠和缩放等。...在Flutter中，Container本身可以单独作为控件存在（比如单独设置背景色、宽高），也可以作为其他控件的父级存在：Container可以定义布局过程中子Widget如何摆放，以及如何展示。...需要注意的是，Positioned控件只能在Stack中使用，在其他容器中使用会报错。总结 Flutter的布局容器强大而丰富，可以将小型、单用途的基本视觉元素快速封装成控件。...多子Widget布局有Row和Column，使用Expanded控件使用容器内部的剩余空间。

5.8K3 0

Flutter GridView 网格控件

在项目中，有时候会有诸如“日历”展示之类的需求，此时单列表ListView控件已经无法满足我们的需要。GridView就是为了满足这样的“二维数组”排列而存在的。...layout的委托 ListWidget> children = const Widget>[], }) GridView的大部分参数与ListView是一样的，请参见系列文章《Flutter...GridView.builder(gridDelegate: null, itemBuilder: null), gridDelegate参数在上面已经讲过了，我们主要来看看itemBuilder如何使用...6.1、使用步骤：导入flutter_staggered_grid_view库。...:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; 使用 StaggeredGridView.countBuilder

2.2K2 0

【Flutter 专题】13 通过丑丑的【签到】页面学习以下【权重比例】的重要性

和尚今天搭建了一个很丑的【签到】小页面，页面很简单，只有寥寥几个控件，但和尚想通过这个简单的小页面学习一下权重/比例的使用方式，顺便也学习了一下如何绘制圆形效果。 ?...和尚测试时用到了如下两种： ClipOval ClipOval 是一个很强大的裁剪子控件为椭圆或圆角的控件；子控件没有特殊限制。...，Flutter 直接提供的绘制圆形的控件，可添加背景色及背景图；且在加载网络图片时，网络状态不佳或图片有问题时只显示背景色，更人性化。...权重/比例和尚在 Android 开发过程中为了适配不同机型，常用到权重 android:weight，这样在均分布局时起到重要作用；和尚在 Flutter 中没有直接发现 weight...的身影，Flutter 常用 Row 和 Column 来设置横向和纵向布局。

1.4K5 1

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

在 flutter 中，Container、Text 等组件都属于 Widget，所以我们将这种树称为 Widget 树，也可以叫做控件树，它就表示了我们在 dart 代码中所写的控件的结构。 ?...然而，在 Flutter 体系结构中，真正做组件渲染在屏幕上这个任务的并非在控件层（Widget）层，而是在渲染（Rendering）层，那么我们在代码中所写组件又是怎么通过渲染层显示的呢？...读者也可以把它看作一个更为实际控件，因为在我们的手机屏幕上显示的控件并非我们在代码中所写的 Widget，我们在代码中所使用的像 Container、Text 等这类组件和其属性只不过是我们想要构建的组件的配置信息...在日常开发学习中，我们只需要在代码层配置好我们的 Widget 树，了解各种 Widget 特性及使用方法，其余的工作都可以交给我们的框架层去实现。...方法生成，该对象内部提供多个属性及方法来帮助框架层中的组件如何布局渲染。

2.6K4 0

番外篇-Flutter初识三问

Flutter如何加载图片（网络或者本地）？ Scaffold是什么？讲讲State 在Android中，您可以通过直接对view进行改变来更新视图。...然而，在Flutter中Widget是不可变的，不会直接更新，而必须使用Widget的状态。这是Stateful和Stateless widget的概念来源。...一个Stateless Widget就像它的名字，是一个没有状态信息的widget。例如：在Android中，如果您只想将一个logo使用ImageView展示出来。...但是，如果一个子widget对变化做出反应，而其父widget对变化没有反应，那么包含的父widget仍然可以是无状态的widget 加载图片支持格式：JPEG、WebP、GIF、PNG、BMP、WBMP...Scaffold widget提供了实现：appBar、floatingActionBar等材料设计风格控件的API。

7233 0

Flutter的文本、图片和按钮使用

与单一样式的关键区别在于分片，即如何把一段字符串分为几个片段，给每个片段单独设置样式： Android中使用SpannableString实现 iOS中使用NSAttributedString来实现...Flutter也有类似概念TextSpan TextSpan定义一个字符串片段该如何控制其展示样式，而将这些有独立展示样式的字符串组装在一起，则能支持混合样式的富文本展示。...要支持缓存到文件系统，使用CachedNetworkImage。最后学习按钮控件。Flutter提供多种按钮控件，使用方法类似。...在阅读Flutter SDK中Text、Image、FadeInImage、FloatingActionButton、FlatButton和RaisedButton的源码时，可以发现它们的build函数中都有一个内部真正承载其视觉功能的控件...对于RaisedButton控件，其内部真正承载其视觉功能的控件为Material和InkResponse。这些控件都是Flutter框架中提供的基础控件，用于实现各种不同的视觉效果。

3.5K2 0

Flutter中Widget实现方式

组合方式自定义Widget 在Flutter中，通过组合基础Widget实现自定义控件是常见做法。将多个基础Widget按布局规则组装成高级控件，能显著提升代码复用性。...this.appDate, this.appDescription, this.appVersion }); } 垂直结构拆解将UI分为上下两部分：上半部分：包含图标、文字和按钮的水平布局...下半部分：包含描述信息的垂直布局水平布局实现上半部分使用Row布局： Widget buildTopRow() { return Row( children: [ Padding...SizedBox控制控件尺寸： SizedBox( width: 100, height: 100, child: CustomCircle() ) 使用AspectRatio保持宽高比：...AspectRatio( aspectRatio: 1, child: Container(color: Colors.red) ) 性能注意事项避免在build方法中创建大量对象使用const

1331 0

Flutter技术与实战(4)

问题经典布局：如何定义子控件在父容器中的排版位置单子Widget布局：Container、Padding与Center 多子Widget布局：Row、Column与Expanded 层叠Widget...UI编程范式要想理解 StatelessWidget 与 StatefulWidget 的使用场景，我们首先需要了解，在 Flutter 中，如何调整一个控件（Widget）的展示样式，即 UI 编程范式...经典布局：如何定义子控件在父容器中的排版位置 Flutter 提供了 31 种布局 Widget，对布局控件的划分非常详细，一些相同（或相似）的视觉效果可以通过多种布局控件实现。...在 Flutter 中，Container 本身可以单独作为控件存在（比如单独设置背景色、宽高），也可以作为其他控件的父级存在：Container 可以定义布局过程中子 Widget 如何摆放，以及如何展示...组装使用组合的方式自定义 Widget，即通过我们之前介绍的布局方式，摆放项目所需要的基础 Widget，并在控件内部设置这些基础 Widget 的样式，从而组合成一个更高级的控件。

12.4K2 0

谷歌移动UI框架Flutter教程之Widget

老话说得好，肥水不流外人田，谷歌内部肯定是将Android Studio对Flutter的优化做到最佳的。...Widget基本组件那么话不多说，我们先来熟悉一下关于Flutter的Widget组件，在Flutter中，一切皆组件，TextView、Image、Row、Column等等，都统称组件。...3.列表组件(ListView) 列表组件在移动端的开发中使用非常频繁，那么在Flutter中，该如何使用ListView呢？...当然，这样编写列表在实际开发中是不现实的，我们应该让列表活起来，所以，下面介绍如何实现动态列表。...4.列表组件(GridView) 第二个列表组件，网格组件，该组件在如今的移动应用中也非常常见，最典型的便是系统相册。那么我们关心的是在Flutter中该如何去使用GridView呢？

2.5K1 0

文本、图片和按钮在Flutter中怎么用

理解了单一样式文本Text的使用方法后，我们再来看看如何在一段字符串中支持多种混合展示样式。...面对这样的需求，在Android中，我们使用 SpannableString来实现；在iOS中，我们使用NSAttributedString来实现；而在Flutter中国也有类似的概念，即TextSpan...child 参数用于设置按钮的内容，告诉Flutter控件应该长成什么样，也就是控制着按钮控件的基本样式。child 可以接收任意的Widget，比如Text、Image等控件。...如果要支持缓存到文件系统，可以使用第三方的CacheNetworkImage。最后，我们学习了按钮控件，Flutter提供了多种按钮控件，而它们的使用方法也都类似。...其实，在UI基本信息的表达上，Flutter的经典控件与原生iOS、Android系统提供的控件没有什么本质区别。

10.5K2 0

为Flutter应用程序添加交互性顶

在这个例子中，切换星号是一个独立的操作，不会影响父窗口小部件或其他用户界面，因此窗口小部件可以在内部处理它的状态。在管理状态中了解更多关于窗口小部件和状态的分离以及如何管理状态的信息。...作为小部件设计师，您根据您期望使用的小部件做出决定。以下是管理状态的最常见方法：小部件管理自己的状态父母管理小部件的状态混搭方法你如何决定使用哪种方法？...在以下示例中，TapboxB通过回调将其状态导出到其父项。由于TapboxB不管理任何状态，因此它的子类为无状态部件。...在点击事件中，将该状态更改传递给父部件，以使用widget属性采取适当的操作。...处理手势，Flutter Widget框架导览中的一部分：如何创建按钮并使其响应输入。 Flutter中的手势：Flutter手势机制的描述。

5.3K2 0

Flutter小课堂-Image篇

前言图片是一个我们又爱又恨的东西，它是万美之本，也是万恶之源为阐述清楚Image的使用，专开本文,希望通过本文，你可以学到一个很有用的方法另外通过最后布局海贼王的悬赏令，基本实现可改头像，名字...在 Image.asset中有一大段注释介绍如何flutter中使用资源图片 ?...宽高比3：2测试结果: ? 图片小于容器尺寸下的测试结果 ? 根据图片看一下，应该不言而喻了。...FilterQuality.low在缩放图片时使用二次线性插值算法 FilterQuality.none 在缩放图片时使用临近算法 FilterQuality.hight 是最好的，也是最慢的，通常是三次插值或更好...const double viewRate = 0.663306; //视图宽高比 const double imgRate = 1.234411;//图片宽高比 var width =

6962 0

【译】Flutter架构综述

Material和Cupertino库提供了全面的控件集，这些控件使用widget层的组合基元来实现Material或iOS设计语言。...每个widget都嵌套在它的父体内部，并且可以从父体接收上下文。...在确定其大小时，子代必须尊重其父代给它的约束。子对象在父对象建立的约束条件下，通过向上传递尺寸来做出响应。 ?...应用中嵌入原生控件，或者在现有应用中嵌入Flutter。...app 因为Flutter的内容是绘制在纹理上的，而且它的widget树完全是内部的，所以在Flutter的内部模型中没有像Android视图这样的东西存在的地方，也没有在Flutter widgets

6.9K1 0

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

文章目录一、Flutter 全面屏适配二、全面屏适配的情况三、全面屏适配方法四、反面示例 ( 留海遮挡内容 ) 五、Android 中配置最大宽高比六、使用 SafeArea 进行全面屏适配...七、使用 MediaQuery 进行全面屏适配八、博客资源一、Flutter 全面屏适配 ---- 传统的 Android 屏幕的宽高比是 16 : 9 , 但是当前主流的全面屏手机 , 基本已经都是...: 在一些手机中 , 顶部有刘海 , 水滴等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险 ; 二、全面屏适配的情况 ---- 全面屏适配要点 : 在页面中使用了 Scaffold...: 在顶部和底部留出足够的安全区域 ; 方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件包裹页面 , 可以实现适配 ; 方案二 : 使用 MediaQuery.of...; 如果使用截图 , 无法看到被留海遮挡的样式 ; 五、Android 中配置最大宽高比 ---- 在 flutter_screen_adaption\android\app\src\main\AndroidManifest.xml

6.8K2 0

Widget中的state到底是什么

在上一篇文章Widget，构建Flutter界面的基石中，我们深入理解了Widget是Flutter构建界面的基石，，也认识了Widget、Element、RenderObject是如何互相配合，实现图形渲染工作的...在今天这篇文章中，我将着重介绍这两种类型的区别，从而帮我们更好地理解Widget，掌握不同类型Widget的正确使用时机。...UI编程范式要想理解StatelessWidget与StatefulWidget的使用场景，我们首先需要了解，在Flutter中，如何调整一个控件（Widget）的展示样式，即UI编程范式。...下述代码分别展示了在Android、iOS和原生JavaScript中，如何将一个文本控件的展示文案更改为Hello World： // Android 设置某文本控件展示文案为 Hello World...第一个例子是，我需要创建一个自定义的弹窗控件，把使用App过程中出现的一些错误信息提示给用户。

3.6K2 0

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

一、老套路，先看样式文章底部源码，是左侧样式，右侧是我实际开发中的展示 ? ? 二、讲解（后附源码） 1.这里主要是用到GridView 组件 GridView是一个可滚动的，2D数组控件。...gridDelegate参数控制子控件的排列，有2个选择： SliverGridDelegateWithFixedCrossAxisCount：交叉轴方向上固定数量，对于垂直方向的GridView来说交叉轴方向指的是水平方向...mainAxisSpacing：主轴方向上2行之间的间隔。 crossAxisSpacing：交叉轴方向上之间的间隔。 childAspectRatio：子控件宽高比。...，鼠标放在某个组件上，然后Alt+Enter可以给组件包裹一层padding 相关快捷键操作链接：Android Studio对flutter的一些快捷键 5.当然通过children的方式加载组件并不是个好方式...80, color: Colors.primaries[i % Colors.primaries.length], ); }), ) 三、源码 import 'package:flutter

2.4K2 0

全网最详细的一篇Flutter 尺寸限制类容器总结

注意：黄色区域表示子控件超出父控件的区域了，黄色区域只会在debug模式下存在，在release模式下，只有红色区域。...FractionallySizedBox 当我们需要一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的70%，可以使用FractionallySizedBox来实现此效果。...使用FractionallySizedBox包裹子控件，设置widthFactor宽度系数或者heightFactor高度系数，系数值的范围是0-1，0.7表示占父组件的70%，用法如下： FractionallySizedBox...10%，可以使用无子控件的FractionallySizedBox，用法如下： Container( height: 200, color: Colors.grey, child: Column...在ListView中直接添加Container组件，如下： ListView( children: Widget>[ Container( color: Colors.green

1.4K1 1

Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

所以当我们通过 context 调用 inheritFromWidgetOfExactType 时，就可以往上查找到父控件的 Widget，从在 scoped_model 获取到 _InheritedModel...flutter_redux 是如何实现状态管理的吧。...的结合使用，接下来就让我们看看这个流程是如何联动起来的吧。...现在看起来使用流程是不是变得复杂了？但是这带来的好处就是复用的颗粒度更细了，装配和功能更加的清晰。那这个过程是如何实现的呢？后面我们将分析这个复杂的流程。...可以看出 flutter_redux 的内部实现复杂度是比较高的，在提供组装、复用、解耦的同时，也对项目进行了一定程度的入侵，这里的篇幅可能不能很全面的分析 flutter_redux 中的整个流程，

2.8K2 0

点击加载更多

【Flutter实战】定位装饰权重组件及柱状图案例

Flutter 约束宽高比的控件 AspectRatio

经典布局：如何定义子控件在父容器中的排版位置？

Flutter GridView 网格控件

【Flutter 专题】13 通过丑丑的【签到】页面学习以下【权重比例】的重要性

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

番外篇-Flutter初识三问

Flutter的文本、图片和按钮使用

Flutter中Widget实现方式

Flutter技术与实战(4)

谷歌移动UI框架Flutter教程之Widget

文本、图片和按钮在Flutter中怎么用

为Flutter应用程序添加交互性顶

Flutter小课堂-Image篇

【译】Flutter架构综述

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

Widget中的state到底是什么

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

全网最详细的一篇Flutter 尺寸限制类容器总结

Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐