Power Apps隐藏二级导航栏

背景

我们通常可以看到用JS开发的导航栏可以有二级导航栏，点击主导航栏还可以隐藏。我们power apps同样可以做到。

资源准备

power apps账号。

组件开发

之前出过一期导航栏的实现这个是升级版，首先转到Component页面，新增，然后我们新添一个Gallery，用于存放我们的导航栏。然后在App界面On start属性中添加Navigate集合。代码如下：

我们看一下里面的元素：
ID：用于排序，因为我们需要按顺序拍一下序
Name：导航栏上显示的名字
Path：排列导航栏
Level：控制每一个导航栏的缩进
Visible：控制导航栏的隐藏
Navigate Screen：跳转的页面

Set(
    a,
    true
);
Set(
    b,
    true
);
Set(
    AnimalsNavigat,
    Table(
        {
            ID: 1,
            Name: "Animals",
            Path: 1,
            Level: 1,
            Visable: true,
            NavigateScreen: Animals
        },
        {
            ID: 2,
            Name: "Dogs",
            Path: 2,
            Level: 1,
            Visable: true,
            NavigateScreen: Dogs
        },
        {
            ID: 3,
            Name: "JinMao",
            Path: 2.1,
            Level: 2,
            Visable: a,
            NavigateScreen: JinMao
        },
        {
            ID: 4,
            Name: "HaShiQi",
            Path: 2.2,
            Level: 2,
            Visable: a,
            NavigateScreen: HaShiQi
        },
        {
            ID: 5,
            Name: "Cats",
            Path: 3,
            Level: 1,
            Visable: true,
            NavigateScreen: Cats
        },
        {
            ID: 6,
            Name: "BuOu",
            Path: 3.1,
            Level: 2.1,
            Visable: b,
            NavigateScreen: BuOu
        }
    )
);
ClearCollect(
    AnimalsNavigate,
    AnimalsNavigat
);

定义参数接受上述的Table到Component

定义一个输入的table参数

定义按压导航栏变色的参数

这个参数用于导航栏按压之后改变Fill

导航栏实现

Gallery的Items

SortByColumns(
    Filter(
        LeftNavigatePro.Animals,
        Visable,
        true
    ),
    "ID"
)

我们这个里面排序的是所有Visible为True的元素，我们点击需要隐藏时，只需要把需要隐藏的元素visable改为false即可。

Gallery元素添加

插入一个Label 显示导航栏名字

按压导航栏背景颜色

添加其他修饰元素，将Onselect方法，跳转到该Screen即可。

画布开发

准备几个页面

然后我们将Animals的OnVisible设置如下代码

Set(
    AnimalsNavigat,
    Table(
        {
            ID: 1,
            Name: "Animals",
            Path: 1,
            Level: 1,
            Visable: true,
            NavigateScreen: Animals
        },
        {
            ID: 2,
            Name: "Dogs",
            Path: 2,
            Level: 1,
            Visable: true,
            NavigateScreen: Dogs
        },
        {
            ID: 3,
            Name: "JinMao",
            Path: 2.1,
            Level: 2,
            Visable: a,
            NavigateScreen: JinMao
        },
        {
            ID: 4,
            Name: "HaShiQi",
            Path: 2.2,
            Level: 2,
            Visable: a,
            NavigateScreen: HaShiQi
        },
        {
            ID: 5,
            Name: "Cats",
            Path: 3,
            Level: 1,
            Visable: true,
            NavigateScreen: Cats
        },
        {
            ID: 6,
            Name: "BuOu",
            Path: 3.1,
            Level: 2.1,
            Visable: b,
            NavigateScreen: BuOu
        }
    )
);
ClearCollect(
    AnimalsNavigate,
    AnimalsNavigat
);

Dogs页面OnVisable设置如下代码：

Set(
    a,
    !a
);
Set(
    AnimalsNavigat,
    Table(
        {
            ID: 1,
            Name: "Animals",
            Path: 1,
            Level: 1,
            Visable: true,
            NavigateScreen: Animals
        },
        {
            ID: 2,
            Name: "Dogs",
            Path: 2,
            Level: 1,
            Visable: true,
            NavigateScreen: Dogs
        },
        {
            ID: 3,
            Name: "JinMao",
            Path: 2.1,
            Level: 2,
            Visable: a,
            NavigateScreen: JinMao
        },
        {
            ID: 4,
            Name: "HaShiQi",
            Path: 2.2,
            Level: 2,
            Visable: a,
            NavigateScreen: HaShiQi
        },
        {
            ID: 5,
            Name: "Cats",
            Path: 3,
            Level: 1,
            Visable: true,
            NavigateScreen: Cats
        },
        {
            ID: 6,
            Name: "BuOu",
            Path: 3.1,
            Level: 2.1,
            Visable: b,
            NavigateScreen: BuOu
        }
    )
);
ClearCollect(
    AnimalsNavigate,
    AnimalsNavigat
);

Cats的OnVisable设置如下代码：

Set(
    b,
    !b
);
Set(
    AnimalsNavigat,
    Table(
        {
            ID: 1,
            Name: "Animals",
            Path: 1,
            Level: 1,
            Visable: true,
            NavigateScreen: Animals
        },
        {
            ID: 2,
            Name: "Dogs",
            Path: 2,
            Level: 1,
            Visable: true,
            NavigateScreen: Dogs
        },
        {
            ID: 3,
            Name: "JinMao",
            Path: 2.1,
            Level: 2,
            Visable: a,
            NavigateScreen: JinMao
        },
        {
            ID: 4,
            Name: "HaShiQi",
            Path: 2.2,
            Level: 2,
            Visable: a,
            NavigateScreen: HaShiQi
        },
        {
            ID: 5,
            Name: "Cats",
            Path: 3,
            Level: 1,
            Visable: true,
            NavigateScreen: Cats
        },
        {
            ID: 6,
            Name: "BuOu",
            Path: 3.1,
            Level: 2.1,
            Visable: b,
            NavigateScreen: BuOu
        }
    )
);
ClearCollect(
    AnimalsNavigate,
    AnimalsNavigat
);

设置按压样式

将每个Screen的导航栏的SeleText属性写入该页面的名称。

测试