代码之家  ›  专栏  ›  技术社区  ›  Shervin.bdn

Flutter中的完全可滚动页面问题

  •  0
  • Shervin.bdn  · 技术社区  · 1 年前

    嗯,我有这个 SingleChildScrollView 作为我的身体

    但我无法完全滚动到底部

    class LigoLog extends StatefulWidget {
      const LigoLog({super.key});
    
      @override
      State<LigoLog> createState() => _LigoLogState();
    }
    
    class _LigoLogState extends State<LigoLog> {
      final _box = Hive.box('ligo');
    
      @override
      Widget build(BuildContext context) {
        var deviceWidth = MediaQuery.of(context).size.width;
        var deviceHeight = MediaQuery.of(context).size.height;
    
        return Scaffold(
          appBar: AppBar(
            centerTitle: true,
            toolbarHeight: 60.0,
            iconTheme: const IconThemeData(
              color: Colors.white,
            ),
            title: Text(
              'appbarTitle'.tr,
              style: const TextStyle(
                fontFamily: 'Lalezar',
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            backgroundColor: const Color(0xffF85E63),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              setState(() {
                Hive.box('ligo').clear();
              });
            },
            backgroundColor: const Color(0xffF85E63).withOpacity(0.5),
            child: const Icon(
              Icons.delete_rounded,
              color: Colors.white,
              size: 25.0,
            ),
          ),
          resizeToAvoidBottomInset: false,
          body: SingleChildScrollView(
                  physics: const BouncingScrollPhysics(),
                  child: SizedBox(
                    width: deviceWidth,
                    height: deviceHeight,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          width: 350.0,
                          height: deviceHeight,
                          child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: _box.length,
                            itemBuilder: (context, index) {
                              Log log = _box.getAt(index);
                              return Padding(
                                padding: const EdgeInsets.only(top: 10.0),
                                child: Container(
                                  height: 210.0,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(8.0),
                                    border: Border.all(
                                      width: 1.5,
                                      color: const Color(0xffF85E63),
                                    ),
                                  ),
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'responsibleAdminLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.responsibleAdmin,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'transactionDate'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.date,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'userLogLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              '@${log.user}',
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'userAmountLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.amount,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'userCostInDollarsLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.costInDollars,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'userCostInTomansLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.costInTomans,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 8.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                              'userStatusLabel'.tr,
                                              style: const TextStyle(
                                                color: Color(0xffF85E63),
                                                fontSize: 18.5,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            const SizedBox(width: 8.0),
                                            Text(
                                              log.status,
                                              style: TextStyle(
                                                color: LigoStatus.statusColor,
                                                fontSize: 18.0,
                                                fontFamily: 'Lalezar',
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              );
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
        );
      }
    }
    

    我试过一些东西,比如使用 double.infinity 和身高一样,但不起作用…或者可能我做错了什么。

    如果你帮我做这件事,我将不胜感激。

    1 回复  |  直到 1 年前
        1
  •  1
  •   Dhafin Rayhan    1 年前

    有几种方法可以解决此问题。

    首先,您只需要在的底部添加额外的填充 ListView .

    ListView.builder(
      padding: const EdgeInsets.only(bottom: 160.0),
      // ...
    

    除了解决此问题外,还将底部填充添加到 列表视图 通常对用户体验有好处。


    第二种方法,删除不必要的小部件包装。 列表视图 是一个可滚动的小部件,因此将其包装在 SingleChildScrollView 是不必要的。从更改小部件树

    SingleChildScrollView > SizedBox > Column > SizedBox > ListView.builder

    Center > SizedBox > ListView.builder

    现在代码应该如下所示:

    body: Center(
      child: SizedBox(
        width: 350.0,
        child: ListView.builder(
          // ...
        ),
      ),
    )