Question

我想创建一个这样的页面：[1]：https://imgur.com/YreKQi3。但是选择器带有下划线，我也无法显示表格分隔线。

我试图在框架内使用tableview，但是没有用。因为框架的宽度大于表格的宽度，并且分隔符变得不可见。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KiaiDay.Views.PosLogin.ComoTeSentesPage"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             Title="Como te sentes?">
    <ContentPage.Content>
        <StackLayout Padding="30">
            <StackLayout HorizontalOptions="Center">
                <Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
            </StackLayout>
            <Frame CornerRadius="10" BackgroundColor="#ECECEC" BorderColor="LightGray" Padding="10" HeightRequest="200">
                <TableView Intent="Form" HeightRequest="200">
                    <TableRoot>
                        <TableSection>
                        <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="Energia" TextColor="White"  VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="500" Opacity="1"/>
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                                <ViewCell>
                                <StackLayout HeightRequest="40">
                        <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                    <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                    <Label Text="Mindset" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Estratégia" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" TextColor="White" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Acção" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Conexão" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>


                        </TableSection>
                    </TableRoot>
                </TableView>
            </Frame>

        </StackLayout>


    </ContentPage.Content>
</ContentPage>
´´´

Answer 1

我编写了一个简单的演示来满足您答案中图像的要求，我使用了Frame和Grid：

<StackLayout Padding="30">
    <StackLayout HorizontalOptions="Center">
        <Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
    </StackLayout>
    <Frame CornerRadius="7" BackgroundColor="Gray" BorderColor="LightGray" Padding="3" HeightRequest="180" HasShadow="False">

        <Grid ColumnSpacing="1" RowSpacing="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Text="CVC Code:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>1321</x:String>
                        <x:String>3299</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>


        <Label Text="Card No:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>1900</x:String>
                        <x:String>1233</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>



            <Label Text="Expiry:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>12/4</x:String>
                        <x:String>11/8</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>


        </Grid>

    </Frame>

</StackLayout>

在后面的代码中，我使用自定义渲染器删除了选择器的边框：评论中提到的AndroDevil：xamarin-tip-borderless-picker：

public class BorderlessPicker : Picker
    {
    }

这是结果：

如何使用表格视图和选择器作为用户输入？

1 个答案: