网站建设资讯

NEWS

网站建设资讯

flutter界面高度,flutter 界面设计

【Flutter】ListView、GridView高度自适应并随页面滚动

Cannot hit test a render box that has never been laid out.

成都创新互联公司服务热线:13518219792,为您提供成都网站建设网页设计及定制高端网站建设服务,成都创新互联公司网页制作领域十余年,包括iso认证等多个方面拥有丰富的网站营销经验,选择成都创新互联公司,为网站保驾护航!

当ListView、GridView作为Wrap、Column等组件的子组件时,若外部没有设置高度,则会产生此报错。

解决放案:为ListView、GridView设置属性 shrinkWrap: true,

刷新后,报错消失,但是发现其只可内部滚动。

至此,需求达成。

参考

Flutter 获取是否是暗黑模式,屏幕宽度,屏幕高度

导入 import 'dart:ui';

1.获取  window.platformBrightness 的值  如果是 Brightness.light 代表是正常模式, 如果是Brightness.dark代表是暗黑模式

2.获取屏幕宽高

final double screenWidth = window.physicalSize.width/window.devicePixelRatio;

final double screenHeight = window.physicalSize.height/window.devicePixelRatio;

Flutter 设置Container高度自适应GridView 或Listview

在做移动端的时候, 很多时候会需要下图所示的需求,如图 自己所示:

先进行需求分析, 这个模块可以设计成Container包含GridView,  GridView中子内容个数由后台数据控制, 但是在直接写Container包含GridView控件时会出现 "Failed assertion: line 1920 pos 12: 'hasSize'" 有关的错误, 如果直接给Container一个高度的话, 又不满足我们的需求.

我们想要的结果是由数据控制GridView的个数, 而Container大小跟随GridView个数的变化而变化, 而不去直接设置Container的大小, 

因此,我们点开GridView的api发现, 有一个shrinkWrap属性,  设置shrinkWrap:true即可, 运行一下即可达到效果, 但是又会发现另一个问题, 虽然Container大小可以自适应了, 但是里面的内容又会在局部进行滚动, 而我们的想法是想让内容在整个屏幕中滚动, 并没有局部滚动的效果, 因此, 我们设置另一个属性physics: NeverScrollableScrollPhysics()

在GridView.builder中添加

Container跟随GridView内容变化高度: shrinkWrap:true,    

取消滚动效果: physics:NeverScrollableScrollPhysics(),

Flutter实战巧之-showModalBottomSheet 高度自适应

showModalBottomSheet 所弹出的内容高度是固定的。要想自适应自己布局的高度只需如下两点:

加入 isScrollControlled: true 后,弹窗高度会变成全屏的。接下来就是自己布局中的处理。

BottomPhotoDialog是我自己写的想要弹出的布局。在根节点中用SingleChildScrollView来包裹Column即可让弹窗高度适应布局高度

Flutter开发Windows 和 Linux 桌面应用,设置默认窗口大小

在用Flutter 开发windows和linux跨平台应用的时候,如何设置默认窗口大小呢?

flutter没有提供统一的api,所以默认的窗口大小是1280x720.

如果我们想要改成自己想要的默认窗口大小呢?比如我想要设置为:512像素宽, 926像素高

我该怎么做呢?

请看我的教程。

首先你确保你已经为项目创建了windows和Linux的支持。

目前Flutter 为windows和linux提供的是托管式运行的主程序,可以理解为一个壳子,这个壳子就是用cpp写的,平台原生的window 窗口。

所以我们可以打开相应的cpp源代码,设置默认窗口大小。

这里先讲windows和linux,因为mac 平台跟windows和linux不一样,后面单独给大家讲解。

我们看图。

源代码路径位于:

windows/runner/main.cpp

找到

第一个参数是宽度,单位是px,第二个是高度,单位是px

修改后重新运行生效。

源代码路径位于:

linux/my_application.cc

找到

方法的第一个数字是宽度,第二个是高度,单位也是px像素。

修改后,重新运行生效。

现在,你已经学会了如何设置初始窗口大小了。


标题名称:flutter界面高度,flutter 界面设计
文章起源:http://cdweb.net/article/hoogoe.html