如何在flutter draggablescrollablesheet中創建堆棧垂直列表視圖和水平列表視圖？

Question

我正在嘗試在作為draggablescrollablesheet一部分的verticalistview中創建一個horizo​​ntallistview，感到困惑嗎？ 基本上，我正在嘗試在 Flutter 的 Vertical ScrollView 內創建類似於此頁面Horizo​​ntal ListView 的內容，但在draggablescrollablesheet 內。 到目前為止，我一直在運行從不正確的父小部件到無限高度問題的錯誤，我嘗試到處搜索，但到目前為止沒有解決方案，如果有人可以提供幫助，那會有所幫助。 這是代碼

main.dart

    class Weather extends StatefulWidget {
  const Weather({Key? key}) : super(key: key);

  @override
  _WeatherState createState() => _WeatherState();
}

class _WeatherState extends State<Weather> {
  late image_switch testing;
  late time_identifier time;

  late weather_screen_data data_weather;
  late weather_data weather;//the method to get the variable below
  late String iconurl;
  late String image;
  late String timeofday;
  late String year;
  late String weekdate;
  late String weekday;
  late String month;

  @override
  void initState() {
    super.initState();
    testing = image_switch();
    time = time_identifier();
    initializeDateFormatting();
    testing.check_time();
    setState(() {
      timeofday = time.time_switcher();
      image = testing.image_switcher();
      year = time.year();
      weekdate = time.weekdate();
      weekday = time.weekday();
      month = time.month();
    });
  }
  Future<weather_screen_data> data= weather_data.get_data();


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder<weather_screen_data>(
          future: data,
          builder: (BuildContext context, AsyncSnapshot<weather_screen_data> snapshot) {
            if (snapshot.hasData) {
              return Stack(
                  fit: StackFit.expand,
                  children: [
                  Container(
                      decoration: BoxDecoration(
                          image: DecorationImage(
                            image: AssetImage(image),
                            fit: BoxFit.cover,
                            colorFilter: ColorFilter.mode(
                                Colors.black.withOpacity(0.3),
                                BlendMode.darken),
                          )),
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Container(
                                margin: EdgeInsets.only(top: 30.h, left: 11.w),
                                child: Text("Selamat $timeofday, Dwika",
                                    style: TextStyle(
                                      fontSize: 20.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 310.h, left: 23.w),
                                child: Text("${snapshot.data!.description.variable}",
                                    style: TextStyle(
                                      fontSize: 48.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text(weekday,
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text("$weekdate $month",
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    ))),
                            Container(
                                margin: EdgeInsets.only(top: 22.h, left: 23.w),
                                child: Text("$year",
                                    style: TextStyle(
                                      fontSize: 34.sp,
                                      color: Colors.white,
                                    )))
                          ])),
                  Positioned(
                    top:82.h,
                    left:12.w,
                    child: Container(
                        width: 160.w,
                        height: 160.w,
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              image:NetworkImage("http://openweathermap.org/img/w/" + snapshot.data!.icon.variable + ".png"),
                              fit:BoxFit.cover),
                        )),
                  ),
                  Positioned(
                    top: 220.h,
                    left: 12.w,
                    child: Row(
                      children: [
                        Text("${snapshot.data!.temprature.variable.round()}°",
                            style: TextStyle(fontSize: 96, color: Colors.white)),
                        Text("C",
                            style: TextStyle(
                              fontSize: 96,
                              color: Colors.white,
                            )),
                      ],
                    ),
                  ),
                  Positioned(
                      top: 21.h,
                      right: 30.w,
                      child: IconButton(
                        iconSize: 40.sp,
                        color: Colors.white,
                        icon: Icon(Icons.refresh),
                        onPressed: () {
                          time_identifier().generate_days();
                          setState(() {
                            data=weather_data.get_data();
                            testing.check_time();
                            image = testing.image_switcher();
                            timeofday = time.time_switcher();
                            image = testing.image_switcher();
                            year = time.year();
                            weekdate = time.weekdate();
                            weekday = time.weekday();
                            month = time.month();
                          });
                        },
                      )),
                  bottomsheet()
                ]);
            }else{
              return Center(
                child:CircularProgressIndicator()
              );
            }
          }
          ));
  }
}

只關注我放底片的部分，你可以忽略其他部分

底片.dart

class bottomsheet extends StatefulWidget {
  const bottomsheet({Key? key}) : super(key: key);

  @override
  _bottomsheetState createState() => _bottomsheetState();
}

class _bottomsheetState extends State<bottomsheet> {
  @override
  // void initState() {
  //   super.initState();
  //   // days=time_identifier().generate_days();
  //   setState(() {
  //     days=time_identifier().generate_days();
  //   });
  // }
  @override
  Widget build(BuildContext context) {
    List<String> days = time_identifier().generate_days();
    return DraggableScrollableSheet(
        initialChildSize:0.06,
        minChildSize:0.05,
        maxChildSize:0.8,
        builder: (BuildContext context, ScrollController scrollController)
    {
      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              topRight: Radius.circular(50),
            )
        ),
        child: ListView.builder(itemCount:5,itemBuilder: (BuildContext context, int index) {
          return
            Expanded(
              child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children:[
                Expanded(
                  child: ListView.builder(shrinkWrap:true,
                      scrollDirection:Axis.horizontal,itemCount:5,itemBuilder:(BuildContext context, int index){
                    return Text("Hello World");
                  }),
                )
              ]),
            );
        },)

      );},
    );
  }
  }

正如你所看到的，我已經嘗試了書中的所有內容，用 Expanded 包裹小部件，然后使用 Columns、shrinkwrap 等，但它總是給我不正確的 ParentWidget Use 或無限高度問題。

Answer 1

根據你的問題的第一句話（我沒有閱讀其余的大部分內容），我為你做了一個快速演示。 如果您有任何后續問題，請直接回復此答案，讓我知道。

上面演示的完整代碼：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyHome()));
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BottomSheet Demo')),
      body: Center(
        child: ElevatedButton(
          child: Text('Show DraggableScrollableSheet'),
          onPressed: () async {
            final result = await showModalBottomSheet(
              context: context,
              isScrollControlled: true,
              builder: (_) => DraggableScrollableSheet(
                expand: false,
                builder: (context, ScrollController controller) {
                  return ListView.builder(
                    controller: controller,
                    itemCount: 100,
                    itemExtent: 200,
                    itemBuilder: (context, index) {
                      return ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return FlutterLogo(
                            size: 200,
                            style: FlutterLogoStyle.stacked,
                          );
                        },
                      );
                    },
                  );
                },
              ),
            );
            print(result);
          },
        ),
      ),
    );
  }
}

Answer 2

經過一番折騰，結果證明我必須將 ListView.builder 包裝在一個容器中，這樣它在 bottomsheet.dart 中就變成這樣了

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';
import '../weather/time_identifier.dart';

class bottomsheet extends StatefulWidget {
  const bottomsheet({Key? key}) : super(key: key);

  @override
  _bottomsheetState createState() => _bottomsheetState();
}

class _bottomsheetState extends State<bottomsheet> {
  @override
  // void initState() {
  //   super.initState();
  //   // days=time_identifier().generate_days();
  //   setState(() {
  //     days=time_identifier().generate_days();
  //   });
  // }
  @override
  Widget build(BuildContext context) {
    List<String> days = time_identifier().generate_days();
    return DraggableScrollableSheet(
        initialChildSize:0.06,
        minChildSize:0.05,
        maxChildSize:0.8,
        builder: (BuildContext context, ScrollController scrollController)
    {
      return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(50),
              topRight: Radius.circular(50),
            )
        ),
        child: ListView.builder(controller: scrollController,itemCount:5,itemBuilder: (BuildContext context, int index) {
          return
            Container(
              height:200,
              child: ListView.builder(shrinkWrap:true,
                  scrollDirection:Axis.horizontal,itemCount:10,itemBuilder:(BuildContext context, int index){
                return Text("Hello World");
              }),
            );
        },)

      );},
    );
  }
  }