Flutter Container设置 width 无效

简介: Flutter Container设置 width 无效
布局组件和容器组件

容器类Widget和布局类Widget都作用于其子Widget,不同的是:

  • 布局类Widget一般都需要接收一个widget数组(children),他们直接或间接继承自(或包含)MultiChildRenderObjectWidget ;而容器类Widget一般只需要接收一个子Widget(child),他们直接或间接继承自(或包含)SingleChildRenderObjectWidget。
  • 布局类Widget是按照一定的排列方式来对其子Widget进行排列;而容器类Widget一般只是包装其子Widget,对其添加一些修饰(补白或背景色等)、变换(旋转或剪裁等)、或限制(大小等)


BoxContraints机制
  1. minWidth maxWidth minHeight maxHeight
    父组件使用 BoxConstraints 来约束子组件可以显示的最小/最大尺寸。如果 Container 的 width/height 不在 constraints 的范围内的时候,显示的尺寸会被强制计算成一个符合 constraints 要求的值,而不再使用 Container 初始化时设定的宽高。
  2. 通俗点说子组件的 width/height是由父组件和自身一起决定的。子组件的width/height要设置在父组件的范围之内。


布局组件 Row Column

Row/Column 是准备用来做布局的,虽然它们也要遵守上面的 BoxContraints 机制,但是是 “不可见” 的,它们为 Container 设定的尺寸约束是宽松的

minWidth 0

maxWidth 屏幕宽度

minHeight 0

maxHeiight 无穷大

.
解决办法

使用 Row/Column 以后,Container 上配置的 width/height 属性落在了有效范围内,width/height 属性都生效了。

相关文章
|
5月前
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
flutter系列之:flutter中常用的container layout详解
在上一篇文章中,我们列举了flutter中的所有layout类,并且详细介绍了两个非常常用的layout:Row和Column。 掌握了上面两个基本的layout还是不够的,如果需要应付日常的layout使用,我们还需要掌握多一些layout组件。今天我们会介绍一个功能强大的layout:Container layout。
flutter系列之:flutter中常用的container layout详解
了解Flutter中的Container组件
在开发过程中,可以看到万物皆Widget,后续有时间将详细读源码。
Flutter 设置应用主题色和字体
App 开发过程中,肯定希望给用户带来一致的体验,这其中最基础的就是色调、字体保持一致。在 Flutter 中,可以设置全局的主题色调和字体,从而在其他页面引用主色调和字体,实现页面展示层面的一致。
1178 0
Flutter 设置应用主题色和字体
|
前端开发 容器
Flutter基础:Flutter中的div——Container(下)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
前端开发 容器
Flutter基础:Flutter中的div——Container(中)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
前端开发 容器
Flutter基础:Flutter中的div——Container(上)
将Container比做成Flutter中的div并不恰当,但这并不妨碍前端同学用Container做为起点来学习Flutter。Flutter官方的文档阅读起来不是很直观,对于习惯了看前端类有直观示例的文档的同学来说不是很友好,故简单的总结了一下,从Container的基础用法开始。
|
Android开发
【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )(二)
【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )(二)
230 0
【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )(二)