• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

Flutter 中的 CupertinoPageScaffold

Flutter cps12345 10个月前 (07-01) 225次浏览 0个评论

Flutter 中的 CupertinoPageScaffold

什么是CupertinoPageScaffold?

当浏览Flutter的小部件的时候,您可能会遇到一组称为Cupertino(iOS风格的小部件)的小部件,这组小部件会列出所有小部件,这将有助于您在Flutter中开发iOS风格的应用。其中的一些小部件,例如CupertinoActivityIndi​​cator,CupertinoAlertDialog,CupertinoButton,CupertinoDatePicker等,所有这些小部件都可以带给您iOS的原始感觉。

 

CupertinoPageScaffold 简介

我们已经知道 Scaffold 是什么了,如果您还没有阅读关于 Scaffold 的文章,点击这里开始。

简要介绍一下,Scaffold是为您的应用程序提供布局的结构。CupertinoPageScaffold类似于iOS应用程序页面的布局结构,以iOS设计为目标。库比蒂诺(CupertinoPageScaffold)将导航栏放在顶部,并将内容放在导航栏之间或之后。

就像Scaffold小部件一样,CupertinoPageScaffold小部件也具有某些可帮助您构建UI的属性。让我们看一看CupertinoPageScaffold的构造函数,看看它包含什么功能:

Flutter 中的 CupertinoPageScaffold

我们可以看到CupertinoPageScaffold包含的内容,它包含一个导航栏,背景色,一个child和一个resizeToAvoidBottomInset属性.

构造函数使用 @required 标记告诉我们必须具有什么属性,哪些属性已被赋予默认值,例如resizeToAvoidBottomInset,默认情况下设置为true。当使用任何小部件时,多留意他的构造函数对开发有益。

Flutter 中的 CupertinoPageScaffold

navigationBar:

navigationBar通常类似于appBar,绘制在屏幕顶部,使您能够构建应用程序的辅助功能。navigationBar属性通过使用CupertinoNavigationBar使用CupertinoNavigationBar小部件属性。CupertinoNavigationBar本身就是一个小部件,因此我们将在一个单独的文章中进行讨论。

Flutter 中的 CupertinoPageScaffold

我们基本上创建了一个简单而基本的导航栏,该导航栏在左侧包含一个图标,在中间包含一个文本,在右侧包含另一个图标。

Flutter 中的 CupertinoPageScaffold

 

backgroundColor:

顾名思义,backgroundColor属性为页面提供了背景色。它采用Color类的属性,该类使用三种不同的方式获取颜色,

1. Color(int value):采用32位颜色值

2. Color.fromARGB(int a,int r,int g,int b):采用Alpha’a ‘(用于设置透明度) ),红色值,绿色值和蓝色值。

3. Color.fromRGBO(int r ,int g,int b,int o):它需要红色值,绿色值,蓝色值和不透明度值。

Flutter 中的 CupertinoPageScaffold

我们使用了第一种使用颜色的方法,您可以根据需要使用这三种颜色中的任何一种来提供背景颜色。这使支架呈灰色。

Flutter 中的 CupertinoPageScaffold

resizeToBottomInset:

此属性指示支架的子代是否应该调整自身大小以避免窗口的底部插入。让我以一个示例为例进行说明:在每个应用程序中,您都必须始终遇到键盘从底部弹出并开始输入的情况,这是确保您的内容不会隐藏在后面的属性。屏幕键盘和您的应用程序主体应自行调整大小,以避免任何重叠。此属性采用布尔值,并且默认情况下将其设置为true。

 

child:

此属性使您可以获取要在主要内容区域中显示的任何其他小部件。例如,您可以将其中的任何小部件(无论是文本小部件,图标小部件还是图像小部件)都命名为最少。

Flutter 中的 CupertinoPageScaffold

 

在这里,我们使用了文本小部件来在主要内容区域中显示文本。

Flutter 中的 CupertinoPageScaffold

 

 

 

喜欢 (1)

您必须 登录 才能发表评论!