Flutter入门——面向 iOS 开发者的 Flutter

一、SwiftUI概述

1.1、视图和小部件

Flutter和SwiftUI代码描述了UI的外观和工作方式。开发人员将这种类型的代码称为声明性框架。

SwiftUI将UI组件表示为视图。您使用修饰符配置视图。

Text("Hello, World!") // <-- This is a View
    .padding(10)     // <-- This is a modifier of that View

Flutter将UI组件表示为小部件。

视图和小部件在需要更改时才存在。这些语言称此属性为immutability。SwitftUI将UI组件属性表示为View修饰符。相比之下，Flutter将小部件用于UI组件及其属性。

Padding(   // <-- Thiss is a Widget
    padding: EdgeInsets.all(10.0),// <-- So is this
    child: Text("Hello, World!")// <-- This, too
),

为了组合布局，SwiftUIi和Fluttter都将UI组件潜逃在彼此之中。SwiftUI嵌套View，而Flutter嵌套Widget。

二、布局过程

SwiftUI使用以下过程布置视图：

1. 父试图建议其子视图的大小
2. 所有后续子视图
   • 根据child的view建议尺码
   • 问那个child想要什么尺寸
3. 每个父视图以i赶回的大小呈现子视图。

Flutter的流程有些不同

1. 父部件将约束向下传递给他的子部件。约束包括高度和宽度的最小值和最大值。
2. child试图决定它的大小。它用自己的child列表重复相同的过程：
   • 它通知它的孩子的孩子的约束。
   • 它询问它的孩子希望是很么尺寸。
3. 父部件安排child
   • 如果请求的大小符合约束条件，则父级使用该大小。
   • 如果请求的大小不符合约束条件，父级会限制高度、宽度或两者以符合其约束条件。

Flutter与SwiftUI不同，因为父组件可以覆盖子组件所需的大小。小部件不能有任何它想要的大小。它也不能知道或决定它在屏幕上的位置，因为它的父组件做出了那个决定。

要强制子部件以特定尺寸呈现，父组件必须设置严格的约束。放约束的最小尺寸等于其最大尺寸值时，约束变得紧。

在SwiftUI中，视图可以扩展到可用空间或将它们的大小限制为其内容的大小。Flutter小部件的行为方式类似。

然而，在Flutter中，父部件可以通过无限的约束。无限的约束将它们的最大值设置为无穷大。

UnboundedBox(
    child: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.red,
    ),
)

如果子项展开并且它具有无限约束，Flutter会返回溢出警告。

UnconstrainedBox(
    child: Container(
        color: Colors.red,
        width: 4000,
        height: 50,
    ),
),

要了解约束在 Flutter 中的工作原理，请参阅了解约束。

三、设计系统

因为Flutter面向多个平台，所以您的应用程序不需要符合任何设计系统。尽管以Material小部件为特色，但您的Flutter应用程序可以是使用不同的设计系统：

• Custom Material widgets
• Community built widgets
• Your own custon widgets
• Cupertino widgets遵循Apple界面设计的。