Grid RowDefinitions 高度在毛伊岛不起作用答案

【问题标题】：Grid RowDefinitions heights not working in MauiGrid RowDefinitions 高度在毛伊岛不起作用
【发布时间】：2022-09-27 09:46:37
【问题描述】：

我需要定义一个具有比例高度和宽度的网格，所以我有以下代码：

<?xml version=\"1.0\" encoding=\"utf-8\" ?>
<ContentPage xmlns=\"http://schemas.microsoft.com/dotnet/2021/maui\"
             xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"
             x:Class=\"PruebaMaui.LoginPage\"
             BackgroundImageSource=\"landscape.png\">
    <ScrollView>
        <Grid
            ColumnDefinitions=\".05*,.18*,.05*,.18*,.05*,.18*,.05*,.18*,.05*\"
            RowDefinitions=\".01*,.02*,.03*,.04*,.05*\">

            <Button BackgroundColor=\"Azure\" Grid.Column=\"0\" Grid.Row=\"0\"/>
            <Button BackgroundColor=\"Blue\" Grid.Column=\"0\" Grid.Row=\"1\"/>
            <Button BackgroundColor=\"Red\" Grid.Column=\"0\" Grid.Row=\"2\"/>
            <Button BackgroundColor=\"Yellow\" Grid.Column=\"0\" Grid.Row=\"3\"/>
            <Button BackgroundColor=\"Green\" Grid.Column=\"0\" Grid.Row=\"4\"/>

            <Button BackgroundColor=\"Blue\" Grid.Column=\"1\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"Red\" Grid.Column=\"2\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"Yellow\" Grid.Column=\"3\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"Green\" Grid.Column=\"4\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"Aqua\" Grid.Column=\"5\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"Firebrick\" Grid.Column=\"6\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"DarkGray\" Grid.Column=\"7\" Grid.Row=\"0\" />
            <Button BackgroundColor=\"DeepPink\" Grid.Column=\"8\" Grid.Row=\"0\" />
        </Grid>
    </ScrollView>
</ContentPage>

但是，一旦我运行我的应用程序，列就会起作用，但行高\'与我的编程参数不匹配。事实上，他们平均获得了总空间。下一张图片显示了我的问题。

image

如果删除 .0s 会发生什么？ RowDefinitions=\"1*,2*,3*,4*,5*\"

标签： grid maui .net-maui

【解决方案1】：

您需要用StackLayout 包裹Grid，然后用StackLayout 包裹按钮。采取这些措施后，高度Grid.RowDefinitions 应该可以工作。

下面是 xaml 代码供您参考：

    <ScrollView>

        <StackLayout>
            <Grid
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"
          
            ColumnDefinitions=".05*,.18*,.05*,.18*,.05*,.18*,.05*,.18*,.05*"
            RowDefinitions=".01*,.02*,.03*,.04*,.05*">

                <StackLayout Grid.Column="0" Grid.Row="0"   >
                    <Button BackgroundColor="Azure" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="0" Grid.Row="1"   >
                    <Button BackgroundColor="Blue"  HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="0" Grid.Row="2"   >
                    <Button BackgroundColor="Red" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>



                <StackLayout Grid.Column="0" Grid.Row="3">
                    <Button BackgroundColor="Yellow" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>


                <StackLayout Grid.Column="0" Grid.Row="4" >
                    <Button BackgroundColor="Green" HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand"/>
                </StackLayout>

                <Button BackgroundColor="Blue" Grid.Column="1" Grid.Row="0" />

                <Button BackgroundColor="Red" Grid.Column="2" Grid.Row="0" />

                <Button BackgroundColor="Yellow" Grid.Column="3" Grid.Row="0" />

                <Button BackgroundColor="Green" Grid.Column="4" Grid.Row="0" />

                <Button BackgroundColor="Aqua" Grid.Column="5" Grid.Row="0" />

                <Button BackgroundColor="Firebrick" Grid.Column="6" Grid.Row="0" />

                <Button BackgroundColor="DarkGray" Grid.Column="7" Grid.Row="0" />

                <Button BackgroundColor="DeepPink" Grid.Column="8" Grid.Row="0" />

            </Grid>

        </StackLayout>
    </ScrollView>

【讨论】：