不可滾動時展開的ListView

我想制作一個帶有 ExpansionTile 串列和頁腳的選單，當 ExpansionTile 未展開（不可滾動）時，頁腳停留在螢屏底部，但是當 ExpansionTile 展開（可滾動）時，ExpansionTile 的子項將頁腳推出的螢屏。

為了更清晰的說明，請看下圖

這是我當前的代碼，但這不是我認為的最佳方式

檢查是否可滾動

checkIsScrollable(BuildContext context) {
if (Scrollable.of(context).position.minScrollExtent >=
    Scrollable.of(context).position.maxScrollExtent) {
  setState(() {
    scrollable = false;
  });
} else {
  setState(() {
    scrollable = true;
  });
}

這是串列視圖

ListView(
  padding: EdgeInsets.symmetric(horizontal: 16),
  children: [
    LimitedBox(
      maxHeight: !scrollable
          ? MediaQuery.of(context).size.height - 84
          : double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 24,
          ),
          Text(
            "Account".toUpperCase(),
            style: ThemeApp.appBarTextStyle(),
          ),
          SizedBox(
            height: 24,
          ),
          photoProfile(),
          SizedBox(
            height: 40,
          ),
          menuProfile(),
          SizedBox(
            height: 40,
          ),
          AccountContent.customerCare1(
            context: context,
            onExpansionChanged: (_) {
              Future.delayed(
                Duration(milliseconds: 101),
                () {
                  checkIsScrollable(context);
                },
              );
            },
          ),
          AccountContent.sellWithUs(
            context: context,
            onExpansionChanged: (_) {
              Future.delayed(
                Duration(milliseconds: 101),
                () {
                  checkIsScrollable(context);
                },
              );
            },
          ),
          AccountContent.customerCare2(
            context: context,
            onExpansionChanged: (_) {
              Future.delayed(
                Duration(milliseconds: 101),
                () {
                  checkIsScrollable(context);
                },
              );
            },
          ),
          !scrollable
              ? Expanded(
                  child: Container(),
                )
              : Container(),
          Container(
            padding: EdgeInsets.symmetric(vertical: 16),
            child: Column(
              children: [
                InkWell(
                  child: Row(
                    children: [
                      Container(
                        height: 18,
                        width: 18,
                        color: ThemeApp.borderColor,
                      ),
                      SizedBox(width: 10),
                      Text(
                        "LOGOUT",
                        style: ThemeApp.subTitleTextStyle(),
                      ),
                    ],
                  ),
                  onTap: () {},
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: [
                    Expanded(
                      child: BorderedButton(
                        child: SvgPicture.asset(
                          "assets/icons/icon_whatsapp.svg",
                          color: ThemeApp.primaryColor,
                        ),
                        onTap: () {
                          openWhatsapp();
                        },
                      ),
                    ),
                    SizedBox(
                      width: 17,
                    ),
                    Expanded(
                      child: BorderedButton(
                        child: SvgPicture.asset(
                          "assets/icons/icon_instagram.svg",
                          color: ThemeApp.primaryColor,
                        ),
                        onTap: () {
                          openInstagram();
                        },
                      ),
                    ),
                    SizedBox(
                      width: 17,
                    ),
                    Expanded(
                      child: BorderedButton(
                        child: SvgPicture.asset(
                          "assets/icons/icon_mail.svg",
                          color: ThemeApp.primaryColor,
                        ),
                        onTap: () {
                          openMail();
                        },
                      ),
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    ),
  ],
);

uj5u.com熱心網友回復：

您應該使用Column內部LayoutBuilder和ConstrainedBox，將 Column 的 minHeight 設定為 maxHeight LayoutBuilder：

  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return  SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: viewportConstraints.maxHeight,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                YourListView(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                ),
                YourFooter(),
              ],
            ),
          ),
        );
      },
    );
  }

uj5u.com熱心網友回復：

我沒有正確回答您的問題，但我想您也需要使用 Stack 小部件，即使您的頁面是可滾動的，它也始終將您的頁腳留在原處。

uj5u.com熱心網友回復：

您不想滾動的頁腳，使 Column 有兩個子項，并在該列內添加另一列并將可滾動資料放入其中，并用 SingleChildScrolView 將其包裝起來。

Column(
children: [
SingleChildScrollView(
child: Column(
children: [
// your scrollable data here
],
Column(
children: [
// Footer not scrollable
],),
],

標籤：扑 镖

上一篇：如何處理空的JSON物件？

下一篇：Flutter/Dart-無法修改不可修改的地圖錯誤