在 flutter 中使用自定義小部件填充列表視圖

Question

我創建了一個日歷小部件。 我有 7 個用戶，我想創建 7 個個人日歷。 為此，我正在使用列表視圖生成器。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test_honours/model/doctors.dart';

import '../core/booking_calendar.dart';
import '../model/booking_service.dart';
import '../model/enums.dart';
import 'appointment_screen.dart';

class BookingCalendarDemoApp extends StatelessWidget {
  BookingCalendarDemoApp({Key? key}) : super(key: key);

  final now = DateTime.now();
  late BookingModel bookingCalendarModel;
  List<BookingModel> bookingList = [];

  void createBooking() {
    for (var i = 0; i < doctorsList.length; i++) {
      Doctor doctor = doctorsList[i];
      bookingList.add(bookingCalendarModel = new BookingModel(
          apptName: 'Mock Service',
          apptDuration: doctor.duration,
          bookingEnd: doctor.endHour,
          bookingStart: doctor.startHour));
    }
  }

  Stream<dynamic>? getBookingStreamMock(
      {required DateTime end, required DateTime start}) {
    return Stream.value([]);
  }

  Future<dynamic> uploadBookingMock({required BookingModel newBooking}) async {
    await Future.delayed(const Duration(seconds: 1));
    converted.add(DateTimeRange(
        start: newBooking.bookingStart, end: newBooking.bookingEnd));
    print('${newBooking.toJson()} has been uploaded');
  }

  List<DateTimeRange> converted = [];

  List<DateTimeRange> convertStreamResultMock({required dynamic streamResult}) {
    ///here you can parse the streamresult and convert to [List<DateTimeRange>]
    ///take care this is only mock, so if you add today as disabledDays it will still be visible on the first load
    ///disabledDays will properly work with real data
    DateTime first = now;
    DateTime tomorrow = now.add(Duration(days: 1));
    DateTime second = now.add(const Duration(minutes: 55));
    DateTime third = now.subtract(const Duration(minutes: 240));
    DateTime fourth = now.subtract(const Duration(minutes: 500));
    converted.add(
        DateTimeRange(start: first, end: now.add(const Duration(minutes: 30))));
    converted.add(DateTimeRange(
        start: second, end: second.add(const Duration(minutes: 23))));
    converted.add(DateTimeRange(
        start: third, end: third.add(const Duration(minutes: 15))));
    converted.add(DateTimeRange(
        start: fourth, end: fourth.add(const Duration(minutes: 50))));

    //book whole day example
    converted.add(DateTimeRange(
        start: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 5, 0),
        end: DateTime(tomorrow.year, tomorrow.month, tomorrow.day, 23, 0)));
    return converted;
  }

  List<DateTimeRange> generatePauseSlots() {
    return [
      DateTimeRange(
          start: DateTime(now.year, now.month, now.day, 12, 0),
          end: DateTime(now.year, now.month, now.day, 14, 0))
    ];
  }

  @override
  Widget build(BuildContext context) {
    double h = MediaQuery.of(context).size.height;

    return Container(
      height: h,
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: bookingList.length,
          itemBuilder: (context, index) {
            return Column(
              children: [
                BookingCalendar(
                    bookingService: bookingCalendarModel,
                    convertStreamResultToDateTimeRanges:
                        convertStreamResultMock,
                    getBookingStream: getBookingStreamMock,
                    uploadBooking: uploadBookingMock,
                    pauseSlots: generatePauseSlots(),
                    hideBreakTime: false,
                    loadingWidget: const Text('Fetching data...'),
                    uploadingWidget: const CircularProgressIndicator(),
                    locale: 'en_US',
                    startingDayOfWeek: CalendarDays.monday,
                    wholeDayIsBookedWidget:
                        const Text('Fully booked! Choose another day'),
                    disabledDates: [DateTime(2023, 1, 20)],
                    disabledDays: [6, 7])
              ],
            );
          }),
    );
  }
}

當我運行該應用程序時，整個屏幕都是黑色的。 我收到此錯誤：

The following assertion was thrown during paint():
RenderBox was not laid out: RenderRepaintBoundary#557e1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 2001 pos 12: 'hasSize'

你能給我任何建議嗎？ 此外，這個 class 應該在用戶點擊按鈕后打開。

Answer 1

使用擴展（）

Expanded(
        child: ListView.builder()
),

Answer 2

嘗試將width設置Container height ListView.builder(