listview에서 listview의 높이 문제를 해결하는 방법

비하하다

나는 이것에 대해 너무 많은 시간을 할애합니다 ... 누군가이 문제를 해결하는 데 도움을 줄 수 있습니까?
내 목표는 카드(프레임) 목록을 만드는 것입니다. 각 카드에는 두 개의 레이블과 (짧은) 항목 목록이 있습니다.

좀 더 읽기 쉽게 만들기 위해 프레임과 해당 콘텐츠가 포함된 사용자 지정 구성 요소를 만들기로 결정했습니다.
각 프레임에 레이블만 있는 프레임 목록을 만들면 모든 것이 좋아 보입니다(첫 번째 이미지). 프레임의 높이는 필요한 높이일 뿐 더 이상은 아닙니다.
하지만 ... 프레임에 두 번째 수준의 목록 보기를 추가하면 모든 목록이 항목(두 번째 이미지) 뒤에 빈 높이를 많이 낭비하게 됩니다!!! 그리고 난 이 낭비된 공간을 없앨 수 없어. . . . . . .

여기에 이미지 설명 입력여기에 이미지 설명 입력

사용자 정의 구성 요소의 코드만 게시합니다(목록 보기의 두 번째 수준 포함).

  <ContentView.Content>
        <Frame BorderColor="Gray"
               CornerRadius="5"
               Padding="8">
            <StackLayout>
                <Label Text="{Binding Data.TaskHeading, Source={x:Reference this}}"/>
                <Label Text="{Binding Data.PeopleHeading, Source={x:Reference this}}"/>
                
                <BoxView Color="Gray"
                         HeightRequest="2"
                         HorizontalOptions="Fill" />

                <ListView ItemsSource="{Binding Data.Tasks, Source={x:Reference this}}" BackgroundColor="Pink" HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="{Binding mark}"/>
                                    <Label Text="{Binding description}"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </Frame>
    </ContentView.Content>

모든 곳에 VerticalAlign="Start"를 추가하려고 시도하지만 도움이 되지 않습니다.
HasUnevenRows="True" 사용은 이 문제에 영향을 미치지 않습니다.

아무도 나를 도와줄 수 있습니까?

드베가

BindableLayouts를 사용하여 해결할 수 있습니다 .

다음 코드는 필요한 것과 매우 유사합니다. 기본 모델을 작성했으며 INotifyPropertyChanged필요하면 언제든지 인터페이스를 구현할 수 있습니다 .

모델/뷰모델:

public class CardModel
{
    public string TaskHeading { get; set; }
    public string PeopleHeading { get; set; }

    public CardItemModel[] Items { get; set; }

    public class CardItemModel
    {
        public string Mark { get; set; }
        public string Description { get; set; }
    }
}

public class CardsPageViewModel
{
    public CardModel[] Tasks { get; set; }

    public CardsPageViewModel()
    {
        Tasks = Enumerable.Range(1, 10).Select(i =>
            new CardModel
            {
                TaskHeading = $"TaskHeading {i}",
                PeopleHeading = $"People Heading {i}",
                Items = Enumerable.Range(1, 4).Select(j =>
                    new CardModel.CardItemModel
                    {
                        Mark = $"Mark {j}",
                        Description = $"Description {j}"
                    }).ToArray()
            }).ToArray();
    }
}

XAML:

...
<ScrollView>
    <StackLayout BindableLayout.ItemsSource="{Binding Tasks, Mode=OneWay}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Frame>
                    <StackLayout>
                        <Label Text="{Binding TaskHeading, Mode=OneWay}" FontAttributes="Bold"/>
                        <Label Text="{Binding PeopleHeading, Mode=OneWay}"/>
                        <StackLayout  BindableLayout.ItemsSource="{Binding Items, Mode=OneWay}" BackgroundColor="LightPink">
                            <BindableLayout.ItemTemplate>
                                <DataTemplate>
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="{Binding Mark, Mode=OneWay}"/>
                                        <Label Text="{Binding Description, Mode=OneWay}"/>
                                    </StackLayout>
                                </DataTemplate>
                            </BindableLayout.ItemTemplate>
                        </StackLayout>
                    </StackLayout>
                </Frame>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>
...

산출:

여기에 이미지 설명 입력

편집 : ViewBox 구분 기호와 Frame CornerRadius 및 BorderColor를 추가하는 것을 잊었습니다.

여기에 이미지 설명 입력

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

XAML에서 ListView 높이를 연속 행의 높이로 설정하는 방법

Django 2.2에서 ListView 문제를 해결하는 방법

flutter-headash의 listview 높이를 제어하는 방법

ListView DataTemplate에서 행 높이를 설정하는 방법

Flutter: Flutter에서 ListView의 높이 match_parent를 만드는 방법

GridLayout 내에서 ListView의 높이를 제한하는 방법은 무엇입니까?

Android ListView 행 높이의 크기를 조정하는 방법

ListView의 행 높이를 이미지 크기에 맞게 설정하는 방법

iPhone X에서 탭 막대 높이 문제를 해결하는 방법

`ListView`에서 항목의 높이를 편집하는 방법은 무엇입니까?

수평 ListView에서 항목의 높이를 개별적으로 설정하는 방법은 무엇입니까?

android에서 listView의 총 행 높이를 계산하는 방법은 무엇입니까?

ListView에서 항목의 높이를 변경하는 방법은 무엇입니까?

Android에서 ListView 높이를 사용자 정의하는 방법은 무엇입니까?

Firebase에서 ListView의 데이터를 검색하는 방법

android의 listview에서 Listview 항목을 제거하는 방법

Kotlin Android의 Recycler View에서 이 문제를 해결하는 방법

Flutter의 ListView.builder에서 ListView를 사용하는 방법

vb.net에서 listview 채우기 속도를 높이는 방법

ListView 항목의 높이가 실제 ListView의 높이보다 큰지 확인하는 방법 (즉, 목록보기를 스크롤 할 수 있음)?

ListView의 행에서 버튼을 클릭 할 때 CursorAdapter를 사용하는 ListView를 업데이트하는 방법

android의 listview에서 소켓 io에서 데이터를 검색하는 방법

Jquery Mobile 축소 가능한 Listview의 높이를 설정하는 방법

Django 템플릿에서 문자열에서 데이터로의 변환 문제를 해결하는 방법

z3에서만이 문제를 해결하는 방법

postfix에서이 문제를 해결하는 방법

postfix에서이 문제를 해결하는 방법

Unity에서이 OnPointerEnter () 문제를 해결하는 방법

Fragment에서이 문제를 해결하는 방법

TOP 리스트

  1. 1

    셀레늄의 모델 대화 상자에서 텍스트를 추출하는 방법은 무엇입니까?

  2. 2

    Blazor 0.9.0 및 ASP.NET Core 3 미리보기 4를 사용한 JWT 인증

  3. 3

    openCV python을 사용하여 텍스트 문서에서 워터 마크를 제거하는 방법은 무엇입니까?

  4. 4

    C # 16 진수 값 0x12는 잘못된 문자입니다.

  5. 5

    Excel : 합계가 N보다 크거나 같은 상위 값 찾기

  6. 6

    오류 : MSB4803 : MSBuild의 .NET Core 버전에서 "ResolveComReference"작업이 지원되지 않습니다.

  7. 7

    R에서 Excel로 내보낼 때 CET / CEST 시간 이동이 삭제됨

  8. 8

    node.js + postgres : "$ 1"또는 그 근처에서 구문 오류

  9. 9

    확대 후 하이 차트에서 Y 축이 잘못 정렬 됨

  10. 10

    EPPlus에서 행 높이를 설정할 때 이상한 동작

  11. 11

    Ionic 2 로더가 적시에 표시되지 않음

  12. 12

    MS Access 부분 일치 2 테이블

  13. 13

    EPPlus에서 병합 된 셀의 행 높이 자동 맞춤

  14. 14

    ExecuteNonQuery- 연결 속성이 초기화되지 않았습니다.

  15. 15

    ResponseEntity를 사용하고 InputStream이 닫히는 지 확인하는 적절한 스트리밍 방법

  16. 16

    PrematureCloseException : 연결이 너무 일찍 닫혔습니다.

  17. 17

    오류 : "const wchar_t *"유형의 인수가 "WCHAR *"유형의 매개 변수와 호환되지 않습니다.

  18. 18

    Java에서 이미지를 2 색으로 변환

  19. 19

    overflow-y를 사용할 때 스크롤 버벅 거림 줄이기 : scroll;

  20. 20

    Java에서 Apache POI를 사용하여 테이블 크기 및 간격을 단어로 설정하는 방법

  21. 21

    Android Kotlin은 다른 활동에서 함수를 호출합니다.

뜨겁다태그

보관