ListView.builder와 함께 사용하는 확장 위젯에 대한 모든 대안

Nov 28 2020

선택한 버튼에 따라 다른 위젯 (selectedWidget)을 표시하는 화면을 디자인해야합니다. 문제는 콘텐츠가 동적이며 모든 API에 대해 ListView.builder를 사용해야한다는 것입니다. 그리고 ListView.builder는 목록보기를 포함하는 행이 확장 위젯에 래핑 된 경우에만 작동합니다. ListView가있는 전체 열을 덮는 확장 위젯으로 인해 달성 할 수없는 ListView 바로 아래에 두 개의 버튼이 있기를 원합니다.

이것이 제가 필요한 디자인입니다.

코드는 내가 사용해온 기본 구조를 제공합니다. selectedWidget은 선택된 FlatButton에 따라 선택 될 ListView.builder 위젯입니다. 또한 selectedWidget을 포함하는 열에는 동적 높이가 있습니다. listview의 크기에 따라 조정해야하므로 고정 높이 또는 maxHeight를 정의 할 수 없습니다. 여기서는 minHeight 만 줄 수 있습니다. 그리고 내 ListView 아래에있는 두 개의 버튼은 내 ListView 바로 아래에 있어야하며 flex 3으로 열의 너비를 가져야합니다.

또한 ListView에 대한 스크롤을 비활성화하고 SingleChildScrollView를 사용하려고 시도했지만 ListView 아래의 두 단추도 스크롤을 시작합니다. 화면에서 정적이어야하며 ListView 만 스크롤해야합니다.

위의 문제에 대한 해결책이 필요합니다. 이 확장 위젯에 대한 해결 방법이 필요합니다.이 위젯은 내 목록보기 바로 아래에 내 버튼을 정렬 할 수없고 공백을 제공합니다. Expanded 위젯 없이는 ListView.builder를 사용할 수 없다고 생각하므로 ListView.builder에 대한 대안이 있으면 공유하십시오. ListView 및 확장 위젯으로 가능한 모든 구조를 시도했습니다.

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

답변

yellowgray Nov 30 2020 at 17:01

아마도 ListView 내에서 사용 Flexible하고 설정할 수 있습니다 shrinkWrap: true,. 다음 2 개의 버튼은 Expand이후 위젯이 필요하지 않을 수 있습니다 .

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons