【问题标题】:bottom button in ModalBottomSheet is not visible after singlechildscrollview in flutterModalBottomSheet中的底部按钮在flutter中的singlechildscrollview后不可见
【发布时间】:2021-12-28 08:52:03
【问题描述】:

我希望取消费用和底部按钮保持固定在屏幕上,而选择座位和乘客应该是可滚动的。但是,每当我尝试在 singlechildscrollview 之后插入任何小部件时,它都不会出现在底部。

因为,我的列有 3 个小部件,一行,singlechildscrollview 和按钮,所以我的按钮和顶行应该保留在那里,剩余的座位和乘客应该是可滚动的,但我看不到底部按钮,而我的行工作正常,留在那里。

代码 -

showCancellationCharges(BuildContext? context) {
    final DateTime currentDate = DateTime.now();
    if (ticketData!.data!.booking!.boarding!.eta! >
        currentDate.millisecondsSinceEpoch)
      showModalBottomSheet(
        backgroundColor: Colors.white,
          context: context!,
          builder: (context) => Wrap(
            children: [
              StatefulBuilder(
                    builder: (context, stateSetter) => Padding(
                      padding: MediaQuery.of(context).viewInsets,
                      child: Container(
                        //height: MediaQuery.of(context).size.height*0.7,
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 16),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Padding(
                                padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Text(
                                      'Cancellation Charges',
                                      style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20,
                                      )
                                    ),
                                    IconButton(
                                      icon: Icon(
                                        Icons.close,
                                        color: colorPrimary,
                                      ),
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      },
                                    ),
                                  ],
                                ),
                              ),
                              Container(
                                height: MediaQuery.of(context).size.height*0.5,
                                child: SingleChildScrollView(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.symmetric(vertical: 8.0),
                                        child: Text(
                                          'Choose Seat(s)',
                                          style: TextStyle(color: popUpLightTextColor),
                                        ),
                                      ),
                                      Column(
                                        children: List.generate(
                                            ticketData!.data!.booking!.seats!.length,
                                                (index) => CancellationItem(
                                              checkBoxState: ticketData!.data!.booking!
                                                  .seats![index].selected,
                                              checkBox: (v) => stateSetter(() {
                                                print('seat at index $index $v');
                                                if (v)
                                                  totalSeatToCancel++;
                                                else
                                                  totalSeatToCancel--;
                                                ticketData!.data!.booking!.seats![index]
                                                    .selected = v;
                                              }),
                                              // checkBoxState: data[index.],
                                              imagePath:
                                              'assets/icons/ticket_seat_icon.svg',
                                              title: ticketData!
                                                  .data!.booking!.seats![index].code,
                                            )),
                                      ),
                                      // CancellationSeatItems(
                                      //   data: ticketData.data.booking.seats,
                                      // ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(vertical: 8.0),
                                        child: Text(
                                          'Choose Passenger(s)',
                                          style: TextStyle(color: popUpLightTextColor),
                                        ),
                                      ),

                                      Column(
                                        children: List.generate(
                                            ticketData!.data!.booking!.passengers!.length,
                                                (index) => CancellationItem(
                                              checkBoxState: ticketData!.data!.booking!
                                                  .passengers![index].selected,
                                              checkBox: (v) => stateSetter(() {
                                                if (v)
                                                  totalPassengerToCancel++;
                                                else
                                                  totalPassengerToCancel--;
                                                print('passenger at index $index $v');
                                                ticketData!.data!.booking!
                                                    .passengers![index].selected = v;
                                              }),
                                              imagePath: (ticketData!.data!.booking!
                                                  .passengers![index].gender ==
                                                  'MALE')
                                                  ? 'assets/icons/male_icon.svg'
                                                  : 'assets/icons/female_icon.svg',
                                              title: ticketData!.data!.booking!
                                                  .passengers![index].name,
                                            )),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.symmetric(vertical: 16),
                                child: Container(
                                  child: ValueListenableBuilder(
                                    valueListenable: isCalculating,
                                    builder: (BuildContext context, bool val, Widget? child) {
                                      return FlatButton(
                                        height: 44,
                                        minWidth: MediaQuery.of(context).size.width,
                                        color: val ? Colors.grey : colorPrimary,
                                        onPressed: () => calculateItem(),
                                        child: Text(
                                          val ? 'Calculating...' : 'Calculate',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 16
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ),
                              ),
                              // CancellationPassengerItems(
                              //   data: ticketData.data.booking.passengers,
                              // ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
            ],
          ));
    else
      _snackbarService.showSnackbar(
          message: 'Sorry, ticket can not be cancelled');
  }

【问题讨论】:

    标签: android ios flutter dart


    【解决方案1】:

    其实我解决了这个问题。我刚刚为showModalBottomSheet 使用了isScrollControlled: true, 参数,就完成了。

    【讨论】:

      【解决方案2】:

      你可以把列表视图放在一个有高度的容器中

      【讨论】:

        猜你喜欢
        • 2020-06-12
        • 2019-11-09
        • 2021-12-13
        • 2020-12-16
        • 1970-01-01
        • 2021-02-13
        • 2020-05-04
        • 2021-01-09
        • 1970-01-01
        相关资源
        最近更新 更多