【问题标题】:Layout error due to ListView and PageViewListView 和 PageView 导致的布局错误
【发布时间】:2021-03-31 11:55:55
【问题描述】:
Widget build(BuildContext context) {
    super.build(context);

    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(
          key: _scaffoldKeyProfilePage,
          backgroundColor: Colors.white,
          body: user == null
      ? Center(
          child: CircularProgressIndicator(),
        )
      : RefreshIndicator(
          onRefresh: _onRefresh,
          child: ListView(
              shrinkWrap: true,
              padding: EdgeInsets.all(0),
               
                  children: [
                    BuildMainProfile(
           ....//build profile (with heiht = ScreenHeight/1.4)
          ),
                   
                    Container(
                   ...//to build bio section 
                    ),
                 
                    Flexible(
                            child: PageView(
            
            children: [
              ListView.builder(
                            
                        shrinkWrap: true,
                          itemCount: 30,
                          itemBuilder: (BuildContext context, int index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(color: index%2==0?Colors.red:Colors.green,height: 30.0,width: double.infinity,),
                          );
                         },
                        ),
           Container(height: 400,width: 200,color: Colors.green,),
            Container(height: 400,width: 200,color: Colors.blue,),
             Container(height: 400,width: 200,color: Colors.pink,)
            ],
                  ),
                    )
                  ],
                ),
        ),
        ),
    );
  

我收到一条错误消息:

ParentDataWidget Flexible(flex: 1) 想要应用 ParentData 的 将 FlexParentData 类型输入到 I/flutter (9926):RenderObject,它具有 已设置为接受不兼容类型 ParentData 的 ParentData。 I/flutter (9926):通常,这意味着灵活的小部件具有 错误的祖先 RenderObjectWidget。通常,I/flutter (9926): 灵活的小部件直接放置在 Flex 小部件中。我/颤振( 9926): 有问题的 Flexible 当前放置在 重绘边界小部件。
.
.
.
.
另一个例外是 抛出:水平视口被赋予了无限的高度。我/颤振( 9926):引发了另一个异常:未布置 RenderBox: RenderViewport#4dd2b 需要-布局需要-油漆 NEEDS-COMPOSITING-BITS-UPDATE I/flutter (9926):另一个例外是 抛出:RenderBox 未布置:RenderViewport#4dd2b NEEDS-PAINT 需要-合成-位-更新

如何消除这个错误,我什至在 PageView 上使用了 Flexible 并在 listView 中使用了 shrinkWrap。

【问题讨论】:

    标签: flutter flutter-layout


    【解决方案1】:

    您不能在ListView 中直接使用Flexible。也许你必须尝试这样的事情

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text(Translator.of(context).translate("ratingsandreviews"),),
          bottom: TabBar(
            indicator: UnderlineTabIndicator(),
            tabs: <Widget>[
              Tab(child: Icon(Icons.grid_on_outlined),),
              Tab(child: Icon(Icons.timeline),),
              Tab(child: Icon(Icons.account_box),),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: [
                BuildMainProfile(),
                Container(
                  //to build bio section 
                ),
                Expanded(
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: POSTLIST.length,
                    itemBuilder: (context, index) {
                      return Container(); // or what you want
                    },
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      childAspectRatio: 1.0,
                    ),
                  ),
                ),
              ],
            ),
            SecondPage(), // second page
            ThirdPage(), // third page
            Fourth(), // fourth page
            // RideSharingReviewsPage(),
          ],
        ),
      ),
    );
    

    【讨论】:

    • 嘿!感谢解决方案有效,我在问题中忘记提到的是我的第一个 PageView 孩子实际上将拥有一个列表视图构建器。所以我不能限制我的 PageView 的高度。布局非常类似于 Instagram 个人资料页面,此处的 PageView 用于查看用户的帖子。所以知道如何做到这一点。
    • 你的主要问题已经回答了吗?
    • 我已经更新了我的答案。但下次避免这样做。如果您的第一个问题得到了回答,而您还有另一个问题,请发布另一个问题
    • 当然我会小心的。来到这个问题,使用更新的方法,列表将能够在 400 的约束中滚动,这是我不想要的,我希望整个屏幕滚动。
    • 为此,您必须删除您的BuildMainProfile 及其下方的Container
    【解决方案2】:
    PageView(
            children: [HomeScreen(), XodimlarScreen(), SizedBox(
                height: MediaQuery.of(context).size.height,
                child: DavomatScreen()),HomeScreen(),],
            controller: _pageControllerrr,
    
           // physics: BouncingScrollPhysics(),
            onPageChanged: (page) {
    
                index = page;
    
            },
          ),
    

    【讨论】:

    • 能否请您edit您的答案添加一些解释为什么此代码有效?正如here 所解释的那样,从长远来看,您的答案将对更多人有用,并解释何时使用您的代码以及它为什么起作用。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-13
    • 1970-01-01
    • 1970-01-01
    • 2015-02-12
    • 1970-01-01
    相关资源
    最近更新 更多