Power Apps 如何自定义导航栏

                        Power Apps 如何自定义导航栏

• 我们要在Power Apps 上自定义导航栏，就需要用到组件。

1. 创建一个组件，点击Componets并创建一个组件。2.点击New Componet

3.点击后可以生成Componets3的一个组件，2部分就是该组件的内容我们需要将导航栏的部分在2部分创建

 

 

• 在组件内生成导航栏的样式。

1.点击左边导航栏的media按钮，点击Upload，可以上传一些图片用来做导航栏的图标。我们可以直接拖动图片到组件内。

1. 也可以用Apps自带的一些图标。

 

 

1. 自定义设置导航栏，我设置的图标的参数，这个图标用来控制导航栏的伸缩

4.新加一个组件的属性，用来设置组件的宽度。选中组件、点击Properties、点击New custom property来自定义一个属性。(组件的width属性不能是用公式，因此我们定义一个属性用来生成组件宽度的具体数值，再将生成的数值直接赋值给组件的width属性，进而控制组件的宽度)

 

 

 

5．填写新建组件属性的信息并点击创建

 

6.创建完成我们就可以在我们创建的组件的属性内找到我们刚创建的属性。

7.接着我们可以同过点击导航栏的按钮来控制导航栏的缩放。

首先我们先在组件的OnReset的属性定义一个布尔值来控制导航栏的缩放

Set(componentsOpen,false)

接着在导航栏的图片的OnSelect的属性内加入下面的公式，意思是点击图片按钮来控制变量的布尔值的变化，进而控制导航栏的缩放。

Set(componentsOpen,!componentsOpen)

设置新建组件的自定义属性，我们根据布尔值的值来控制导航栏的宽度。

If(componentsOpen,Max(App.Width,App.MinScreenWidth)/5,70)

将自定义属性的值赋值给组件的width属性

完成上述操作我们就可以通过点击图片按钮来控制导航栏的缩放。

 

8.创建导航栏的内容

首先自定义一个表属性用于作为导航栏的内容。同上一个自定义属性类似。注意数据的类型为表

在组件的属性内找到新定义的属性修改公式为下面,Image 为图片的路径，如果是Icon 例如 Icon: Icon.Add Name : 导航栏的提示信息 、Screen 对应的页面地址

 

：

Table(

    {

        Image: 首页,

        Name: "首页",

        Screen: App.ActiveScreen

    },

    {

        Image: 个人中心,

        Name: "个人中心",

        Screen: App.ActiveScreen

    },

    {

        Image: 多购物,

        Name: "购物",

        Screen: App.ActiveScreen

    }

)

我们在组件内新建一个垂直空白库来展示Table的内容。

 

 

 

库的Item属性的数据源即为我们刚刚新创建的自定义属性  Component3.componentsConent

点击上图铅笔的图标去设置库每一行展示的内容。

 

我们插入一个image用来放图片(插入一个图标用来放图标)，插入一个文本框用来放页面的名字。

1.插入image

 

库插入的Image的image属性即为 ThisItem.Image

 

再插入一个文本框

文本框的Text属性输入  ThisItem.Name

 

 

配置点击时的页面跳转和颜色区别。继续点击铅笔的图标选择属性TemplateFill  输入下面的公式：  If(ThisItem.Screen = App.ActiveScreen,RGBA(187, 221, 140, 1),RGBA(0, 0, 0, 0)) OnSelect的属性 输入以下公式 Set(openSet,false);Navigate(ThisItem.Screen) 

作用先把导航收小然后跳转页面

颜色

 跳转

 

                     自定义导航栏就完成了，接着我们去app新建一些页面来测试一下导航栏。

首先我们新建四个页面

接着每个页面都导入我们的导航栏

 

 

再插入一个label用来区分当前是哪个页面

 

在主页加一个button 用来加载真正的导航栏的信息。在button的Onselect 属性输入

ClearCollect(

    NavigateItems,

    Table(

        {

        Image: 首页,

        Name: "首页",

        Screen: Screen首页

    },

        {

        Image: 个人中心,

        Name: "个人中心",

        Screen: Screen个人中心

    },

    {

        Image: 多购物,

        Name: "购物",

        Screen: Screen购物

    }

   

    )

)

 

真实开发我们将这段代码写在App的OnStart属性

将四个页面的组件的componentsConent 的属性修改为 NavigateItems

 

修改完成如下图

 

因为我们新加的NavigateItems 只有当点击上图的按钮，才会将真实的导航栏信息加入到NavigateItems，所以现在导航栏显示为空。

点击完button的效果

 

当去到其他页面的效果