it-swarm-ko.com

수직 뷰포트의 높이는 제한이 없습니다

나는 설레다. 그리드 뷰를 가운데에 배치해야합니다.

enter image description here

아래는 내가 시도한 코드입니다.

  @override
  Widget build(BuildContext context) {
    return new Material(
      color: Colors.deepPurpleAccent,
      child: new Column(
       mainAxisAlignment: MainAxisAlignment.center,
          children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
            return new Center(
                child: new CellWidget()
            );
          }),)]
      )
    );
  }

다음과 같은 예외 :

    I/flutter ( 9925): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9925): The following assertion was thrown during performResize():
I/flutter ( 9925): Vertical viewport was given unbounded height.
I/flutter ( 9925): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 9925): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 9925): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 9925): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 9925): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 9925): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 9925): the height of the viewport to the sum of the heights of its children.
I/flutter ( 9925): 
I/flutter ( 9925): When the exception was thrown, this was the stack:
I/flutter ( 9925): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.Dart:827:15)
I/flutter ( 9925): #1      RenderViewport.performResize (package:flutter/src/rendering/viewport.Dart:880:6)
I/flutter ( 9925): #2      RenderObject.layout (package:flutter/src/rendering/object.Dart:1555:9)

미리 감사드립니다!

21
pallav bohara

이 두 줄 추가

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
...
44
BloodLoss

플렉서블 또는 확장 위젯 내부에 그리드보기 배치

return new Material(
    color: Colors.deepPurpleAccent,
    child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
         Flexible(
          child:  GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
          return new Center(
             child: new CellWidget(),
          );
        }),))]
    )
);
13
Manoj Kumar

이것은 일반적으로 ListView 내에서 GridView/Column을 (를) 사용하려고 할 때 발생하며,이를 해결하는 방법에는 여러 가지가 있습니다.

  1. ListView에서 Expanded 줄 바꿈

    Column(
      children: <Widget>[
        Expanded( // wrap in Expanded
          child: ListView(...),
        ),
      ],
    )
    
  2. ListView을 (를) SizedBox에 줄 바꿈하고 height

    Column(
      children: <Widget>[
        SizedBox(
          height: 400, // fixed height
          child: ListView(...),
        ),
      ],
    )
    
  3. ListView에서 shrinkWrap: true을 (를) 사용하십시오.

    Column(
      children: <Widget>[
        ListView(
          shrinkWrap: true, // use this
        ),
      ],
    )
    
10
CopsOnRoad

단일 하위 정렬에 Column을 사용하지 마십시오. 대신 Align을 사용하십시오.

    new Align(
      alignment: Alignment.topCenter,
      child: new GridView(),
    )
4
Rémi Rousselet

기둥의 높이는 어느 정도인지 알 수 없습니다. Flexible 을 사용하여 주 축에서 사용 가능한 공간을 확장하고 채울 수있는 유연성을 갖도록 열을 줄 바꿈하십시오.

  @override
  Widget build(BuildContext context) {
    return new Material(
        color: Colors.deepPurpleAccent,
        child: Flexible(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children:<Widget>[new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) {
                  return new Center(
                      child: new CellWidget()
                  );
                }),)]
            )
        )
    );
  }
1
dmarquina