Flutter：如何让PageView在没有固定高度的底部工作表中工作？

Question

我正在 Flutter 应用程序中为身份验证小部件实现平滑的滑入和滑出效果。为了实现这一点，我将它们放置在 PageView 中，如下面的代码片段所示。

但是，我遇到了一个问题：当 PageView 包含在底部工作表中时，应用程序崩溃并且无法渲染它，因为 PageView 需要固定的高度才能正常运行。

我正在寻找一种解决方法，允许 PageView 正确渲染和运行，而不需要固定高度。我希望它动态调整其高度以适应其内容。

_openAuthenticationSheet() async {
  PageController pageController = PageController(initialPage: 0);
  showModalBottomSheet(
    context: context,
    clipBehavior: Clip.antiAlias,
    isScrollControlled: true,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20.0),
        topRight: Radius.circular(20.0),
      ),
    ),
    builder: (BuildContext context) {
      return StatefulBuilder(
        builder: (context, setState) {
          return SingleChildScrollView(
            child: Column(
              children: [
                _buildAuthenticationHeaderIcons(),
                SizedBox(
                  height: MediaQuery.of(context).size.height * .69, // I don't want this.
                  child: PageView(
                    physics: const NeverScrollableScrollPhysics(),
                    controller: pageController,
                    children: [
                      LogInScreen(
                        key: const ValueKey("login"),
                        navBarColor: navbarColor,
                        handleSignUp: () {
                          pageController.animateToPage(1,
                              duration: const Duration(milliseconds: 500),
                              curve: Curves.easeInOut);
                        },
                      ),
                      SignUpScreen(
                        key: const ValueKey("sign_up"),
                        navBarColor: navbarColor,
                        handleLogIn: () {
                          pageController.animateToPage(0,
                              duration: const Duration(milliseconds: 500),
                              curve: Curves.easeInOut);
                        },
                      ),
                    ],
                  ),
                )
              ],
            ),
          );
        },
      );
    },
  )
}

感谢您对任何想法/建议的期待。

Answer 1

这是

PageView

中的动态

BottomSheet

:

这是代码：

class MyHomePage extends StatelessWidget {
  var controller = PageController();
  int index = 0;
  var scaffKey = GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: scaffKey,
        body: Column(
          children: [
            Text('Just show bottom sheet'),
            ElevatedButton(
              onPressed: () {
                scaffKey.currentState!.showBottomSheet(
                  (context) {
                    return Column(
                      children: [
                        Expanded(
                            child: PageView(
                          controller: controller,
                          scrollDirection: Axis.vertical,
                          children: [
                            Container(
                                color: Colors.red,
                                child: Center(
                                    child: Text('Sign Up',
                                        style: TextStyle(
                                          fontSize: 36,
                                        )))),
                            Container(
                                color: Colors.green,
                                child: Center(
                                    child: Text('Sign In',
                                        style: TextStyle(
                                          fontSize: 36,
                                        )))),
                            Container(
                                color: Colors.blue,
                                child: Center(
                                    child: Text('Whatever',
                                        style: TextStyle(
                                          fontSize: 36,
                                        )))),
                          ],
                        )),
                        IconButton(
                          icon: Icon(Icons.arrow_downward_rounded),
                          onPressed: () {
                            // handle the index , don't let it reach 3;
                            controller.animateToPage(++index,
                                duration: Duration(
                                  seconds: 1,
                                ),
                                curve: Curves.easeIn);
                          },
                        )
                      ],
                    );
                  },
                );
              },
              child: Text('Show bottom sheet'),
            )
          ],
        ));
  }
}

您问题中的代码：

不需要

SingleChildScrollView

，只需让

PageView

在列内展开即可。或者您可以自由使用这个小部件。

希望对您有帮助。