MAUI 2023-07-18 260

MAUI Blazor学习1-移动客户端Shell布局

MAUI正式版发布半年了，Net 7也发布了，再次学习MAUI跨平台开发。UI类型选择Blazor，因为Html的生态圈比Xaml好太多了，能用Html解决的，就不要用Xaml。Blazor既可以开发网页客户端，又可以开发移动客户端，一个技术栈可以涵盖前后端，多平台，做小型工具软件不错。

开发环境Win10，Visual Studio 17.5.0 Preview 1.0，安卓模拟器Pixle 5 – API 30(Android 11.0 – API 30)。

新建项目

新建MAUI Blazor项目，选择位置D:\Software\gitee\mauiblazorapp。

选择Net 7.0框架。目标平台仅保留安卓和Windows。

D:\Software\gitee\mauiblazorapp\MaBlaApp\MaBlaApp.csproj

<TargetFrameworks>net7.0-android</TargetFrameworks>

<!–<TargetFrameworks>net7.0-android;net7.0-ios;net7.0-maccatalyst</TargetFrameworks>–>

<TargetFrameworks Condition=”$([MSBuild]::IsOSPlatform(‘windows’))”>$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>

Shell布局

MAUI Blazor项目是网站布局，但是手机APP最常见的布局还是微信这种，Xamarin Forms项目可以直接选择Shell模板，MAUI Xaml项目也可以，但是MAUI Blazor项目不行，这真是一大遗憾。

幸好微软提供了一个移动APP布局的DEMO，这个项目是专门为了展示MAUI跨平台开发特性而设计的，有XAML和Blazor两个版本。

https://github.com/microsoft/dotnet-podcasts

打开其中的MAUI Blazor项目。

D:\Software\Test\dotnet-podcasts-main\src\MobileBlazor\mauiapp\NetPodsMauiBlazor.csproj

参照着DEMO的MainLayout.razor和css文件修改。对于不熟悉Html和css的.Net开发者而言，也是非常头大的工作。希望MAUI Blazor也能提供Shell布局的模板。

D:\Software\Test\dotnet-podcasts-main\src\Web\Pages\Shared\MainLayout.razor

D:\Software\Test\dotnet-podcasts-main\src\Web\Pages\Shared\MainLayout.razor.css

官网DEMO采用grid布局实现了Shell布局效果。这个其实可以参考Xaml的Grid布局或者StackLayout布局去理解，把一个窗口横着分几块，每一块里边再竖着分几块。手机小尺寸页面的情况下，横向分4块。PC大尺寸页面的情况下，横向分3块。

.page {
    background-color: var(--c-neutral-grey1);
    display: grid;
    grid-template-areas:
        "header"
        "main-view"
        "player-bar"
        "nav-bar";
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr auto auto;
    position: relative;
    height: 100%;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .page {
        grid-template-areas:
            "header main-view"
            "nav-bar main-view"
            "player-bar player-bar";
        grid-template-columns: auto 1fr;
        grid-template-rows: 142px 1fr auto;
    }

我写的DEMO很简单，手机小尺寸页面的情况下，横向分2块。PC大尺寸页面的情况下，横向分1块，相比dotnet-podcasts项目没有header和player-bar播放栏。简而言之，就只有nav-bar导航栏和main-view主视图，小尺寸页面上下排列，大尺寸页面左右排列。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\MainLayout.razor.css

.page {
    background-color: var(--c-neutral-grey1);
    display: grid;
    grid-template-areas:
        "main-view"
        "nav-bar";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    position: relative;
    height: 100%;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .page {
        grid-template-areas:
            "nav-bar main-view";
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
    }

然后再借鉴dotnet-podcasts项目的菜单样式。

D:\Software\Test\dotnet-podcasts-main\src\Web\Pages\Shared\NavMenu.razor

D:\Software\Test\dotnet-podcasts-main\src\Web\Pages\Shared\NavMenu.razor.css

.navbarApp__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

我写的DEMO减少为3个按钮

.navbarApp__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

3个按钮就是Blazor项目模板自带的

D:\Software\gitee\mauiblazorapp\MaBlaApp\Shared\NavMenu.razor

<div class="navbarApp">
    <nav class="navbarApp__wrapper">
        <div class="navbarApp-item">
            <NavLink class="navbarApp-link" href="" Match="NavLinkMatch.All">
                <span class="navbarApp-linkIcon oi oi-home" aria-hidden="true"></span>
                <span class="navbarApp-linkLabel">Home</span>
            </NavLink>
        </div>
        <div class="navbarApp-item">
            <NavLink class="navbarApp-link" href="counter">
                <span class="navbarApp-linkIcon oi oi-plus" aria-hidden="true"></span>
                <span class="navbarApp-linkLabel">Counter</span>
            </NavLink>
        </div>
        <div class="navbarApp-item">
            <NavLink class="navbarApp-link" href="fetchdata">
                <span class="navbarApp-linkIcon oi oi-list-rich" aria-hidden="true"></span>
                <span class="navbarApp-linkLabel">Fetch data</span>
            </NavLink>
        </div>
    </nav>

</div>

@code {
}

把dotnet-podcasts项目的字体也搬过来

D:\Software\Test\dotnet-podcasts-main\src\Web\Components\wwwroot\css\fonts

放在wwwroot\css\fonts

D:\Software\gitee\mauiblazorapp\MaBlaApp\wwwroot\css\fonts

照搬dotnet-podcasts项目的字体、颜色定义

D:\Software\Test\dotnet-podcasts-main\src\Web\Components\wwwroot\css\styles.css

放在app.css里边

D:\Software\gitee\mauiblazorapp\MaBlaApp\wwwroot\css\app.css

@font-face {
    font-display: swap;
    font-family: "Segoe UI Light";
    font-style: normal;
    font-weight: 100;
    src: url("fonts/SegoeUILight.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Semilight";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/SegoeUISemilight.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/SegoeUI.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Semibold";
    font-style: normal;
    font-weight: 600;
    src: url("fonts/SegoeUISemibold.woff") format("woff");
}

@font-face {
    font-display: swap;
    font-family: "Segoe UI Bold";
    font-style: normal;
    font-weight: 700;
    src: url("fonts/SegoeUIBold.woff") format("woff");
}

body {
    --c-primary: #c00cc0;
    --c-primary-dark: #8b0995;
    --c-primary-light: #dd0eb3;
    --c-primary-xlight: #fcf2f7;
    --c-primary-xxlight: #fcf2f4;
    --c-secondary: #e10890;
    --c-neutral-black: #000000;
    --c-neutral-dark: #1f1f1f;
    --c-neutral-grey1: #faf9f8;
    --c-neutral-grey2: #f3f2f1;
    --c-neutral-grey3: #edebe9;
    --c-neutral-grey4: #d2d0ce;
    --c-neutral-grey5: #c8c6c4;
    --c-neutral-grey6: #a19f9d;
    --c-neutral-grey7: #605e5c;
    --c-neutral-grey8: #3b3a39;
    --c-neutral-grey9: #323130;
    --c-neutral-white: #ffffff;
    --c-neutral-white-featured: #ffffff;
    --c-neutral-white-complementary: #ffffff;
    --c-player-range: #605e5c;
    --c-waves-image: #f3f2f1;
    --c-searchbar: transparent;
    --c-switch: #605e5c;
    --c-switch-dark: #1f1f1f;
    --c-category: #f3f2f1;
    --gradient-primary-color: #c00cc0;
    --gradient-secondary-color: #e10890;
    --gradient-final: radial-gradient( 101.22% 790.99% at 0% 3.41%, #c00cc0 0%, #e10890 100% );
    --gradient-splash: linear-gradient(114.18deg, #bf26f5 0%, #e2068c 100%);
    --ff-light: "Segoe UI Light";
    --ff-semilight: "Segoe UI Semilight";
    --ff-regular: "Segoe UI";
    --ff-semibold: "Segoe UI Semibold";
    --ff-bold: "Segoe UI Bold";
    --headlines-h1-fs: 90px;
    --headlines-h1-lh: 96px;
    --headlines-h2-fs: 64px;
    --headlines-h2-lh: 72px;
    --headlines-h3-fs: 48px;
    --headlines-h3-lh: 56px;
    --headlines-h4-fs: 36px;
    --headlines-h4-lh: 44px;
    --headlines-h5-fs: 32px;
    --headlines-h5-lh: 40px;
    --headlines-h6-fs: 24px;
    --headlines-h6-lh: 36px;
    --subheadings-s1-fs: 36px;
    --subheadings-s1-lh: 44px;
    --subheadings-s2-fs: 32px;
    --subheadings-s2-lh: 42px;
    --subheadings-s3-fs: 24px;
    --subheadings-s3-lh: 40px;
    --subheadings-s4-fs: 22px;
    --subheadings-s4-lh: 32px;
    --subheadings-s5-fs: 20px;
    --subheadings-s5-lh: 30px;
    --subheadings-s6-fs: 18px;
    --subheadings-s6-lh: 28px;
    --text-xxl-fs: 24px;
    --text-xxl-lh: 32px;
    --text-xl-fs: 20px;
    --text-xl-lh: 30px;
    --text-l-fs: 18px;
    --text-l-lh: 28px;
    --text-m-fs: 16px;
    --text-m-lh: 24px;
    --text-s-fs: 14px;
    --text-s-lh: 22px;
    --text-xs-fs: 12px;
    --text-xs-lh: 18px;
    --link-xl-fs: 20px;
    --link-xl-lh: 30px;
    --link-l-fs: 18px;
    --link-l-lh: 28px;
    --link-m-fs: 16px;
    --link-m-lh: 24px;
    --link-s-fs: 14px;
    --link-s-lh: 22px;
    --input-fs: 15px;
    --input-lh: 24px;
    --box-shadow-s: 0 1px 4px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-m: 0 6px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.05);
    --box-shadow-l: 0 10px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
    --box-shadow-xl: 0 30px 48px rgba(0, 0, 0, 0.16), 0 8px 30px rgba(0, 0, 0, 0.14), 0 8px 10px rgba(0, 0, 0, 0.1), 0 4px 12px -10px rgba(0, 0, 0, 0.5);
}

html,
body,
#app,
.page {
    height: 100%;
}