如何在Flutter中用EphildScrollView小部件 Package 页面视图构建器

h4cxqtbf  于 2023-03-24  发布在  Flutter
关注(0)|答案(2)|浏览(101)

我试图 Package 一个我的列小部件,其中包含一个扩展的小部件 Package 一个页面视图构建器,但不断得到错误。这是一个带有页面视图构建器的入门屏幕,每5秒自动动画滚动。
我曾尝试用一个hildscrollview小部件 Package 整个列,但没有任何效果,只有错误

body: SafeArea(
          child: Stack(
        alignment: AlignmentDirectional.center,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: PageView.builder(
                  controller: _pageController,
                  scrollDirection: Axis.horizontal,
                  onPageChanged: (index) {
                    setState(() {
                      _pageIndex = index % demo_data.length;
                    });
                  },
                  itemBuilder: (context, index) => OnboardingContents(
                    image: demo_data[index % demo_data.length].image,
                    title: demo_data[index % demo_data.length].title,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20.0),
                child: Column(
                  children: [
                    Row(
                      children: [
                        ...List.generate(
                            demo_data.length,
                            (index) => Padding(
                                  padding: const EdgeInsets.all(5.0),
                                  child: DotIndicator(
                                    isActive: index == _pageIndex,
                                  ),
                                ))
                      ],
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    InkWell(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => const LoginScreen()));
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          color: primaryColor,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        width: MediaQuery.of(context).size.width,
                        height: 60,
                        child: const Center(
                          child: Text(
                            'Log In',
                            style: TextStyle(
                              fontSize: 20,
                              color: Colors.white,
                              fontFamily: 'Futura',
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    InkWell(
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => const WelcomeScreen()));
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: primaryColor,
                            width: 2,
                          ),
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        width: MediaQuery.of(context).size.width,
                        height: 60,
                        child: Center(
                          child: Text(
                            'Sign Up',
                            style: TextStyle(
                              fontSize: 20,
                              color: primaryColor,
                              fontFamily: 'Futura',
                            ),
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                  ],
                ),
              )
            ],
          ),
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20.0,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                SizedBox(
                  height: 50,
                  width: 50,
                  child: ElevatedButton(
                      onPressed: () {
                        _pageController.previousPage(
                          curve: Curves.ease,
                          duration: const Duration(milliseconds: 300),
                        );
                      },
                      style: ElevatedButton.styleFrom(
                          backgroundColor: primaryColor,
                          shape: const CircleBorder()),
                      child: Image.asset('assets/images/backward.png')),
                ),
                SizedBox(
                  height: 50,
                  width: 50,
                  child: ElevatedButton(
                      onPressed: () {
                        _pageController.nextPage(
                          curve: Curves.ease,
                          duration: const Duration(milliseconds: 300),
                        );
                      },
                      style: ElevatedButton.styleFrom(
                          backgroundColor: primaryColor,
                          shape: const CircleBorder()),
                      child: Image.asset('assets/images/forward.png')),
                ),
              ],
            ),
          )
        ],
      )),

错误日志:

Error: Unexpected null value.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 561:63  nullCheck
packages/flutter/src/widgets/scroll_position.dart 177:53                                                                       get viewportDimension
packages/flutter/src/widgets/page_view.dart 390:19                                                                             getPixelsFromPage
packages/flutter/src/widgets/page_view.dart 203:15                                                                             animateToPage
packages/lantern_andriod/view/Pages/onboarding_screen.dart 32:23                                                               <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 80:17           <fn>
Restarted application in 848ms.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example if it is
in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
children (using Flexible rather than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would otherwise be forced to take, and
then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent.
If this message did not help you determine the problem, consider using debugDumpRenderTree():
  https://flutter.dev/debugging/#rendering-layer
  http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is:
  RenderFlex#1030d relayoutBoundary=up17 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#7a9b8] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#9d09e] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#5bb31] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯, parentData: <none> (can use size), constraints: BoxConstraints(0.0<=w<=500.0, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: min, crossAxisAlignment: center, verticalDirection: down)
The creator information is set to:
  Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#7a9b8] ← Semantics ← Listener ←
  _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#9d09e] ←
  Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#5bb31] ←
  NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯
The nearest ancestor providing an unbounded width constraint is: _RenderSingleChildViewport#7fdc8 relayoutBoundary=up16 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
  needs compositing
  creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#7a9b8] ← Semantics ← Listener ←
    _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#9d09e] ←
    Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#5bb31] ←
    NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← CustomPaint-[GlobalKey#fe817]
    ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=500.0, 0.0<=h<=620.0)
  size: MISSING
  offset: Offset(0.0, -0.0)
See also: https://flutter.dev/layout/
If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md
The relevant error-causing widget was:
  Column
Column:file:///C:/Users/hp/StudioProjects/latern_mobile/lib/view/Pages/onboarding_screen.dart:56:20
When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49  throw_
packages/flutter/src/rendering/flex.dart 933:9                                                                             <fn>
packages/flutter/src/rendering/flex.dart 935:14                                                                            performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/widgets/single_child_scroll_view.dart 502:7                                                           performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/custom_paint.dart 552:11                                                                    performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/layout_helper.dart 56:10                                                                    layoutChild
packages/flutter/src/rendering/stack.dart 595:43                                                                           [_computeSize]
packages/flutter/src/rendering/stack.dart 622:12                                                                           performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/shifted_box.dart 240:5                                                                      performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/custom_layout.dart 171:10                                                                   layoutChild
packages/flutter/src/material/scaffold.dart 1080:7                                                                         performLayout
packages/flutter/src/rendering/custom_layout.dart 240:7                                                                    [_callPerformLayout]
packages/flutter/src/rendering/custom_layout.dart 410:14                                                                   performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/proxy_box.dart 1467:11                                                                      performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/proxy_box.dart 3815:13                                                                      performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/widgets/overlay.dart 856:14                                                                           performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11                                                                            layout
packages/flutter/src/rendering/proxy_box.dart 120:7                                                                        performLayout
packages/flutter/src/rendering/object.dart 2189:7                                                                          layout
packages/flutter/src/rendering/box.dart 2430:11
ioekq8ef

ioekq8ef1#

需要 Package SingleChildScrollView的是itemBuilder的内容或将其放入OnboardingContents小部件中。

itemBuilder: (context, index) => SingleChildScrollView(
     child: OnboardingContents(
         image: demo_data[index % demo_data.length].image
         title: demo_data[index % demo_data.length].title,
)),
svmlkihl

svmlkihl2#

您可以尝试使用插件ExpandablePageView

编辑可以像在PageView中一样使用ExpandablePageView.builder

ExpandablePageView
实施:

Widget build(BuildContext context) {
  return Column(
    children: [
      Expanded(
    child: SingleChildScrollView(
      child: Column(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ExpandablePageView(
                physics: const NeverScrollableScrollPhysics(),
                scrollDirection: Axis.horizontal,
                controller: pageController,
                onPageChanged: (id) {},
                children: [
                  //Add your pages here
                ],
              ),
            ],
          ),
        ],
      ),
    ),
  ),
 ],
);
}

相关问题