在没有结构的情况下将小部件随机放置在屏幕上并不是一个好主意，尤其是当应用程序应该在具有不同屏幕尺寸的不同设备上运行时，因此始终建议创建一些布局规则，以便您的应用程序看起来像您期望的那样无论屏幕大小。

使用Nowa 非常简单。details panel选择要为其设置布局规则的小部件后，所有布局选项都在右上角可用。请参阅以下屏幕截图：

要为小部件提供固定大小，您只需在 fields 内写入小部件的宽度和高度W（H以逻辑像素为单位）。
使用字段 ( T, B, L, R)，您可以确定小部件与顶部、底部、左侧或右侧的固定距离。

由于确定布局的方法有多种，请注意不要包含相互冲突的规则。当屏幕的 body 小部件是Stack（这是默认选项）时，布局选项起作用。例如，如果主体小部件是Coloum，那么还有另一种方法可以使用列参数来确定小部件的布局，可以使用details panel. 有关更多详细信息，请查看Groups。

从一侧固定距离，居中或拉伸

假设您希望小部件与屏幕的一侧有固定距离。在这种情况下，您可以使用左侧的图标L来B控制垂直轴，使用左侧的图标T来R控制水平轴。让我们探索垂直轴的选项，例如：

单击图标后，将出现四个选项。让我们看看每个选项的含义：

Nowa Flutter开发教程之 03 界面布局相关推荐

Nowa Flutter开发教程之 07 Nowa 可视化编程
Nowa 可视化编程 Nowa 可视化编程 (NVP) 是一种无需编写代码即可直观地为您的应用程序实现功能的方法.要打开 NVP 板,请单击屏幕左下方的 NVP 图标,如下所示. 让我们看看它是如何工 ...
Nowa Flutter开发教程之 06 什么是Components以及为什么使用 (无代码开发)
什么是组件以及为什么使用它们 Components只是在不同地方有多个副本的小部件.与普通小部件相比,Components的特别之处在于修改组件的任何副本都会更新整个应用程序中的所有其他副本. 当您想 ...
Nowa Flutter开发教程之 08 在屏幕之间导航
如何实现导航要实现屏幕之间的导航功能,我们首先需要一个触发移动到另一个屏幕的事件(如果您不知道事件是什么,请查看Nowa Visual Programming 的工作原理). 您可以使用带有事件的小 ...
Nowa Flutter开发教程之 04 Group 分组使您的 UI 构建更加容易(无代码开发)
什么是组group ? 它只是一组以特定方式排列的小部件.组是 Nowa 中创建堆栈.列或原始数据的一种简单方法. 当 group 为 typeColumn时,表示所有的wigets 将垂直堆叠.如果 ...
Nowa Flutter开发教程之 02 添加图像和添加自定义字体（无代码开发教程）
图像可以存储在您的设备上,也可以在互联网上获取.让我们看看如何在每种情况下添加它们. 如果图像存储在您的设备上,只需将图像拖放到您的项目中即可.它将被添加到板上,并将添加到您的资产文件夹中.要再次使用 ...
HarmonyOS ArkUI开发教程之 01 什么是ArkUI 与Flutter SwiftUI有什么区别
听说华为发布了一个声明式UI开发框架,自己看过之后发现,感觉以后肯定都是声明式编程的天下了.Google有Flutter,苹果有SwiftUI ,如今华为又有ArkUI了. 什么ArkUI ArkUI ...
NVIDIA Jetson TX1 系列开发教程之二：刷机与开发前准备
NVIDIA Jetson TX1 系列开发教程之二:刷机与开发前准备转载请注明作者和出处:http://blog.csdn.net/u011475210 嵌入式平台:NVIDIA Jetson T ...
iOS 9应用开发教程之ios9中实现按钮的响应
iOS 9应用开发教程之ios9中实现按钮的响应 IOS9实现按钮的响应按钮主要是实现用户交互的,即实现响应.按钮实现响应的方式可以根据添加按钮的不同分为两种:一种是编辑界面添加按钮实现的响应:另一 ...
iOS 9应用开发教程之ios9的视图
iOS 9应用开发教程之ios9的视图了解IOS9的视图在iPhone或者iPad中,用户看到的和摸到的都是视图.视图是用户界面的重要组成元素.本节将主要讲解ios9视图的添加.删除以及位置和大小 ...

Nowa Flutter开发教程之 03 界面布局

从一侧固定距离，居中或拉伸

Nowa Flutter开发教程之 03 界面布局相关推荐

最新文章

热门文章