Flutter에서 열에 ListView를 추가하는 방법은 무엇입니까?

Flutter 앱을위한 간단한 로그인 페이지를 구성하려고합니다. TextFields 및 로그인 / 로그인 버튼을 성공적으로 구축했습니다. 수평 ListView를 추가하고 싶습니다. 코드를 실행하면 요소가 사라지고 ListView없이 수행하면 다시 괜찮습니다. 이 작업을 올바르게 수행하려면 어떻게해야합니까?

return new MaterialApp(
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text("Login / Signup"),
          ),
          body: new Container(
            child: new Center(
              child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new TextField(
                    decoration: new InputDecoration(
                      hintText: "E M A I L    A D D R E S S"
                    ),
                  ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(obscureText: true,
                    decoration: new InputDecoration(
                      hintText: "P A S S W O R D"
                    ),
                    ),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new TextField(decoration: new InputDecoration(
                    hintText: "U S E R N A M E"
                  ),),
                  new RaisedButton(onPressed: null,
                  child:  new Text("SIGNUP"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new RaisedButton(onPressed: null,
                  child: new Text("LOGIN"),),
                  new Padding(padding: new EdgeInsets.all(15.00)),
                  new ListView(scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    new RaisedButton(onPressed: null,
                    child: new Text("Facebook"),),
                    new Padding(padding: new EdgeInsets.all(5.00)),
                    new RaisedButton(onPressed: null,
                    child: new Text("Google"),)
                  ],)

                ],
              ),
            ),
            margin: new EdgeInsets.all(15.00),
          ),
        ),
      );

콘솔 출력을 확인할 수 있습니다. 오류를 인쇄합니다.

performResize () 동안 다음 어설 션이 발생했습니다. 수평 뷰포트에 무제한 높이가 제공되었습니다. 뷰포트는 교차 축에서 확장되어 컨테이너를 채우고 교차 축의 범위와 일치하도록 자식을 제한합니다. 이 경우 수평 뷰포트에는 확장 할 수있는 무제한의 수직 공간이 주어졌습니다.

가로 목록에 높이 제한을 추가해야합니다. 예 : 높이가있는 컨테이너 포장 :

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

나도이 문제가 있습니다. 내 솔루션은 Expanded위젯을 사용 하여 남은 공간을 확장하는 것입니다.

new Column(
  children: <Widget>[
    new Expanded(
      child: horizontalList,
    )
  ],
);

오류 이유 :

Column주축 방향 (세로 축)에서 최대 크기로 확장되며 ListView.

솔루션

따라서 ListView. 이를 수행하는 방법에는 여러 가지가 있으며 필요에 가장 적합한 것을 선택할 수 있습니다.

1. 당신은 허용 할 경우 ListView남아있는 모든 공간 내부를 차지하기 위해 Column사용 Expanded.

   Column(
     children: <Widget>[
       Expanded(
         child: ListView(...),
       )
     ],
   )

2. ListView특정 으로 제한 height하려면을 사용할 수 있습니다 SizedBox.

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )

3. 당신 ListView이 작은 경우 , 당신은 shrinkWrap그것에 재산을 시도 할 수 있습니다 .

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

나는 SingleChildScrollView부모로 하나의 Column위젯과 마지막 자식으로 목록보기 위젯을 가지고 있습니다.

목록보기에서 이러한 속성을 추가하는 것은 나를 위해 일했습니다.

  physics: NeverScrollableScrollPhysics(),
  shrinkWrap: true,
  scrollDirection: Axis.vertical,

확장 된 위젯은 사용 가능한 공간으로 가능한 한 크기를 늘립니다. ListView는 본질적으로 높이가 무한하기 때문에 오류가 발생합니다.

 Column(
  children: <Widget>[
    Flexible(
      child: ListView(...),
    )
  ],
)

전체 화면으로 렌더링 할 수있는 위젯이 충분하지 않더라도 Expanded가 전체 화면을 차지하므로 필요한 공간 만 차지하므로 여기서는 Flexible 위젯을 사용해야합니다.

실제로 문서를 읽을 때 ListView가 확장 된 위젯 안에 있어야 작동 할 수 있습니다.

  Widget build(BuildContext context) {
return Scaffold(
    body: Column(
  children: <Widget>[
    Align(
      child: PayableWidget(),
    ),
    Expanded(
      child: _myListView(context),
    )
  ],
));

}

위에서 다른 사람들이 언급했듯이 확장 된 랩 목록보기가 해결책입니다.

그러나 중첩 된 열을 다룰 때는 ListView를 특정 높이로 제한해야합니다 (이 문제에 많이 직면했습니다).

다른 해결책이 있으면 의견에 언급하거나 답변을 추가하십시오.

예

  SingleChildScrollView(
   child: Column(
     children: <Widget>[
       Image(image: ),//<< any widgets added
       SizedBox(),
       Column(
         children: <Widget>[
           Text('header'),  //<< any widgets added
            Expanded(child: 
            ListView.builder(
              //here your code
               scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
            return Container();
                   } 
         )
        ),
        Divider(),//<< any widgets added
         ],
       ),

     ],
   ), 
  );

Flex및 Flexible위젯을 사용할 수 있습니다 . 예를 들면 :

Flex(
direction: Axis.vertical,
children: <Widget>[
    ... other widgets ...
    Flexible(
        flex: 1,
        child: ListView.builder(
        itemCount: ...,
        itemBuilder: (context, index) {
            ...
        },
        ),
    ),
],

);

return new MaterialApp(
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Login / Signup"),
      ),
      body: new Container(
        child: new Center(
          child: ListView(
          //mainAxisAlignment: MainAxisAlignment.center,
          scrollDirection: Axis.vertical,
            children: <Widget>[
              new TextField(
                decoration: new InputDecoration(
                  hintText: "E M A I L    A D D R E S S"
                ),
              ),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new TextField(obscureText: true,
                decoration: new InputDecoration(
                  hintText: "P A S S W O R D"
                ),
                ),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new TextField(decoration: new InputDecoration(
                hintText: "U S E R N A M E"
              ),),
              new RaisedButton(onPressed: null,
              child:  new Text("SIGNUP"),),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new RaisedButton(onPressed: null,
              child: new Text("LOGIN"),),
              new Padding(padding: new EdgeInsets.all(15.00)),
              new ListView(scrollDirection: Axis.horizontal,
              children: <Widget>[
                new RaisedButton(onPressed: null,
                child: new Text("Facebook"),),
                new Padding(padding: new EdgeInsets.all(5.00)),
                new RaisedButton(onPressed: null,
                child: new Text("Google"),)
              ],)

            ],
          ),
        ),
        margin: new EdgeInsets.all(15.00),
      ),
    ),
  );

Slivers를 사용해보십시오.

Container(
    child: CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildListDelegate(
            [
              HeaderWidget("Header 1"),
              HeaderWidget("Header 2"),
              HeaderWidget("Header 3"),
              HeaderWidget("Header 4"),
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
              BodyWidget(Colors.green),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
        SliverGrid(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          delegate: SliverChildListDelegate(
            [
              BodyWidget(Colors.blue),
              BodyWidget(Colors.green),
              BodyWidget(Colors.yellow),
              BodyWidget(Colors.orange),
              BodyWidget(Colors.blue),
              BodyWidget(Colors.red),
            ],
          ),
        ),
      ],
    ),
  ),
)