flutter多窗口,flutter常用页面布局

Flutter项目添加logcat窗口的方法

我们在调试flutter时，通常看到的并不是我们熟悉的logcat，而是Run里的Consale,也就是控制台窗口，那么当我们需要在flutter和原生互相调用时，看原生的打印该怎么办呢？答案当然是让logcat重新出来了，在flutter项目中出来，而不用重新跑一个原生项目，或者说用原生项目和flutter来回切，这样太浪费时间了，想要调出logcat一共需要三步：

创新互联公司-专业网站定制、快速模板网站建设、高性价比吉隆网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式吉隆网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖吉隆地区。费用合理售后完善，10余年实体公司更值得信赖。

第一步：

配置SDK

都配置完后记得点确定。

感谢这篇文章的作者

Flutter项目没有Logcat界面时打开Logcat的方法

Flutter真香，我用它写了个桌面版JSON解析工具

Flutter支持稳定的桌面设备开发已经一段时间了，不得不说，Flutter多平台支持的特性真的很香。我本人并没有任何桌面开发的经验，但仍然使用Flutter开发出了一个桌面版小程序，功能很简单，就是对输入的json做格式化处理和转模型。

话不多说，先来看看实际效果。 项目源码地址

开发环境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作为我们日常开发工作中经常要打交道的一种数据格式，它共有6种数据类型： null , num , string , object , array , bool 。我们势必对它又爱又恨。爱他因为他作为数据处理的一种格式确实非常方便简洁。但是在我们做Flutter开发中，又需要接触到json解析时，就会感觉非常棘手，因为flutter没有反射，导致json转模型这块需要手写那繁杂的映射关系。就像下面这样子。

数据量少还能接受，一旦量大，那么光手写这个解析方法都能让你怀疑人生。更何况手写还有出错的可能。好在官方有个工具**json_serializable**可以自动生成这块转换代码，也解决了flutter界json转模型的空缺。当然，业界也有专门解析json的网站，可以自动生成dart代码，使用者在生成后复制进项目中即可，也是非常方便的。

本项目以json解析为切入点，和大家一起来看下flutter是如何开发桌面应用的。

要让我们的flutter项目支持桌面设备。我们首先需要修改下flutter的设置。如下，让我们的项目支持 windows 和 macos 系统。

接下来使用 flutter create 命令创建我们的模版工程。

创建完项目后，我们就可以 run 起来了。

先来看下整体界面，界面四块，分别为功能模块、文件选择模块、输入模块、输出模块。

我们在新建一个桌面应用时，默认的模版又一个Appbar，此时应用可以用鼠标拖拽移动，放大缩小，还可以缩到很小。但是，我们一旦去掉这个导航栏，那么窗口就不能用鼠标拖动了，并且我们往往不希望用户将我们的窗口缩放的很小，这会导致页面异常，一些重要信息都展示不全。因此这里需要借助第三方组件 bitsdojo_window 。通过 bitsdojo_window ，我们可以实现窗口的定制化，拖动，最小尺寸，最大尺寸，窗口边框，窗口顶部放大、缩小、关闭的按钮等。

通过 InkWell 组件，可以捕捉到手势、鼠标、触控笔的移动和停留位置

这个功能是鼠标移动后的UI交互界面。要在窗口上显示一个提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根结点不是 Material 风格的组件，因此会出现黄色的下划线。因此一定要用 Material 包一下 text 。并且你必须给创建的 OverlayEntry 一个位置，否则它将全屏显示。

读取说表拖拽的文件一开始想尝试使用 InkWell 组件，但是这个组件无法识别拖拽中的鼠标，并且也无法从中拿到文件信息。因此放弃。后来从文章《Flutter-2天写个桌面端APP》中发现一个可读取拖拽文件的组件 desktop_drop ，能满足要求。

使用开源组件 file_picker ，选完图片后的操作和拖拽选择图片后的操作一致。

Textfield 如果要显示富文本，那么需要自定义 TextEditingController 。并重写 buildTextSpan 方法。

在做导出功能时遇到下列报错，保存提示为没有权限访问对应目录下的文件。

通过Apple的开发文档找到有关权限问题的说明。其中有个授权私钥的key为 com.apple.security.files.downloads.read-write ，表示 对用户的下载文件夹的读/写访问权限 。那么，使用Xcode打开Flutter项目中的mac应用，修改工程目录下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并将值设置为YES，保存后重启Flutter项目。发现已经可以向下载目录中读写文件了。

当然，这是正常操作。还有个骚操作就是关闭系统的沙盒机制。将 entitlements 文件的 App Sandbox 设置为NO。这样我们就可以访问任意路径了。当然关闭应用的沙盒也就相当于关闭了应用的防护机制，因此这个选项慎用。

原文地址：

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官方并没有对Widget进行官方分类，对其分类主要是为了对Widget进行功能区分。

当组件内容超过当前显示窗口时，如果没有特殊处理，Flutter则会提示Overflow错误。为此，Flutter提供了多种可滚动组件用于显示列表和长布局。

在可滚动组件的坐标描述中，通常将滚动方向称为主轴，非滚动方向称为纵轴。由于可滚动组件的默认方向一般都是沿垂直方向，所以默认情况下主轴就是指垂直方向，水平方向同理。

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！为此，Flutter中提出一个Sliver（中文为“薄片”的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个“薄片”（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为“基于Sliver的延迟构建模型”。

可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。

在很多布局系统中都有ViewPort的概念，在Flutter中，术语ViewPort（视口），如无特别说明，则是指一个Widget的实际显示区域。例如: 一个ListView的显示区域高度是800像素，虽然其列表项总高度可能远远超过800像素，但是其ViewPort仍然是800像素。

可滚动组件都直接或间接包含一个Scrollable组件

如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件。

沿一个方向线性排布所有子组件。支持基于Sliver的延迟构建模型。

ListView高度边界无法确定时会异常。

默认构造函数有一个children参数，它接受一个Widget列表。

实际上通过此方式创建的ListView和使用SingleChildScrollView+Column的方式没有本质的区别。

适合只有少量的子组件的情况，因为这种方式需要将所有children都提前创建好（这需要做大量工作），而不是等到子widget真正显示的时候再创建，也就是说通过默认构造函数构建的ListView没有应用基于Sliver的懒加载模型。

例

例

例（水平滚动）

适合列表项比较多（或者无限）的情况，因为只有当子组件真正显示的时候才会被创建，也就说通过该构造函数创建的ListView是支持基于Sliver的懒加载模型的。

例

例

例（不同类型的item）

ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器。

例

例

类似于Android中的ScrollView，它只能接收一个子组件。

通常内容不会超过屏幕太多时使用SingleChildScrollView，这是因为它不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。

例（将大写字母A-Z沿垂直方向显示）

一个二维网格列表

GridView和ListView的大多数参数都是相同的。

横轴为固定数量子元素。

GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount。

例

例（GridView.count）

该子类实现了一个横轴子元素为固定最大长度的layout算法

例

当子widget比较多时，可以通过GridView.builder来动态创建子widget。

GridView.builder 必须指定的参数有两个，其中itemBuilder为子widget构建器。

例

举个例子，假设有一个页面，顶部需要一个GridView，底部需要一个ListView，而要求整个页面的滑动效果是统一的，即它们看起来是一个整体。如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的。

所以这时就需要一个"胶水"，把这些彼此独立的可滚动组件"粘"起来，而CustomScrollView的功能就相当于“胶水”。

Sliver有细片、薄片之意，在Flutter中Sliver通常指可滚动组件子元素。在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView是不行的，因为它们本身是可滚动组件而并不是Sliver。

因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。

实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver"粘"在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果。

例（SliverList）

例（SliverGrid）

可以用ScrollController来控制可滚动组件的滚动位置

例

滚动位置恢复

ScrollPosition

ScrollController控制原理

滚动监听

例