Question

注意：此小部件是另一列的子级

我需要在Column内使用ListView.builder，但要在Column内使用，我不仅需要设置高度，还需要用Container包装它。
在这里，我使用了MediaQuery.of（context）.size.height和它有效，
但有一个问题，它表明一个RenderFlex在底部溢出226个像素。
如何避免它？

 Column(
                  children: <Widget>[
                    getTopWidget(),
                    Container(    
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      child: ListView.builder(
                          itemCount: shapShot.data.length,
                          itemBuilder: (context,index){
                        return  EventCard(
                          title: shapShot.data[index].title,
                          details: shapShot.data[index].details,
                          imageUrl: shapShot.data[index].imageUrl,
                        );
                      }),
                    ),
                  ],
                );

我尝试过Flexible，但没有用
尝试使用Expanded时出现以下错误

应用截图

RenderBox未布置：RenderRepaintBoundary＃76ded NEEDS-LAYOUT NEEDS-PAINT'package：flutter / src / rendering / box.dart'：失败断言：1695行pos 12：'hasSize'

父类代码

import 'dart:collection';

import 'package:devaayanam/DevaayanamApp/devaayanam_app_communities.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_home_page.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_temples_listing.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_videos.dart';
import 'package:flutter/material.dart';

import '../GradientAppBar.dart';
import 'temples_listing_with_tab_mode.dart';

class DevaayanamAppFramePage extends StatefulWidget {
  DevaayanamAppFramePage({Key key}) : super(key: key);

  @override
  _DevaayanamAppFramePageState createState() => _DevaayanamAppFramePageState();
}

class _DevaayanamAppFramePageState extends State<DevaayanamAppFramePage> {
  int _selectedIndex = 0;
  ListQueue<Widget> page1,page2,page3,page4;
  _DevaayanamAppFramePageState(){
    page1=ListQueue();
    page1.add(DevaayanamAppHomePage());
    page2=ListQueue();
    page2.add(DevaayanamAppTemplesListing());
    page3=ListQueue();
    page3.add(DevaayanamAppCommunities());
    page4=ListQueue();
    page4.add(DevaayanamAppVideos());
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,

      bottomNavigationBar: BottomNavigationBar(
          onTap: _onItemTapped,
          unselectedItemColor: Colors.grey,
          selectedItemColor: Colors.grey,
          currentIndex: _selectedIndex,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: Colors.grey,
                ),
                title: Text(
                  "Home",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.assessment),
                title: Text(
                  "Temples",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.comment),
                title: Text(
                  "Communities",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.play_arrow),
                title: Text(
                  "Videos",
                  style: TextStyle(color: Colors.grey),
                )),
          ]),

      body: Container(
        child: Column(
          children: <Widget>[GradientAppBar(),getBody()],
        ),
      ),
    );
  }


  Widget getBody(){
    switch(_selectedIndex){
      case 0:
        return page1.last;
      case 1:
        return page2.last;
      case 2:
        return page3.last;
      case 3:
        return page4.last;
    }
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

Answer 1

它是由于topWidget（）而发生的，您所能做的就是用Expanded包装内部容器，并删除所给的高度。展开的小部件将使容器占用可用的全部空间。

Column(
              children: <Widget>[
                getTopWidget(),
               //Wrap the container below with expanded
                Container(
                 // remove this height
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  child: ListView.builder(
                      itemCount: shapShot.data.length,
                      itemBuilder: (context,index){
                    return  EventCard(
                      title: shapShot.data[index].title,
                      details: shapShot.data[index].details,
                      imageUrl: shapShot.data[index].imageUrl,
                    );
                  }),
                ),
              ],
            );

edit：请注意，除非该列在窗口小部件层次结构中最外面的列，否则Expanded将无济于事。如果列中有列，则将上列的子级包含展开。

Answer 2

您可以像这样使用它：

Column(
                  children: <Widget>[
                    getTopWidget(),
                    Expanded(    
                      child: ListView.builder(
                          itemCount: shapShot.data.length,
                          itemBuilder: (context,index){
                        return  EventCard(
                          title: shapShot.data[index].title,
                          details: shapShot.data[index].details,
                          imageUrl: shapShot.data[index].imageUrl,
                        );
                      }),
                    ),
                  ],
                );

因为如果您使用的是 MediaQuery.of（context）.size.height ，它将使视图溢出。如已经显示在应用上。

Answer 3

首先用设置高度的容器包裹该列：

Container(
      height: MediaQuery.of(context).size.height,
      child: Column(...),
),

现在在该列中，用Expanded小部件包装要扩展的子代，以便它将其扩展到该列的高度（受外部容器高度限制）。

Answer 4

您可以使用：

  config: any;
  constructor() {
      this.config = {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems:0
   };
 this.config.currentPage= 1;
  for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }

  public setItemsPerPage(event) {
      this.config.itemsPerPage = event
  }
  pageChange(event){
    this.config.currentPage = event;
  }

要根据您的屏幕尺寸制作容器，还可以为容器设置屏幕的某些百分比。例如，将容器高度设置为屏幕使用的60％，宽度设置为屏幕使用的40％：

<ul>
    <li *ngFor="let item of collection | paginate: config">{{ item }}</li>
 </ul>
    <div class="col-auto">
                                    <select class="custom-select" (change)="setItemsPerPage(page.value)" #page>
                                        <option selected>10</option>
                                        <option>50</option>
                                        <option >100</option>
                                        <option >500</option>
                                    </select>
                                </div>

        <pagination-controls (pageChange)="pageChange($event)"></pagination-controls>

将该容器扩展为该容器的子级，并将该列或行作为该容器的子级，以用所需的小部件填充该容器

Container(
      height: MediaQuery.of(context).size.height,
      width:MediaQuery.of(context).size.width,
),

如何设置容器高度以适合屏幕

4 个答案: