web-dev-qa-db-ja.com

Flutterの水平リストのリスト

私はこれに従いました チュートリアル と水平スクロールリストを完全に実装しました。次に、各行が水平リストである垂直リストを作成します。

さまざまなアプローチを試しましたが、水平リストを垂直の子として設定することは単に可能であるはずだと考え続けていますが、それは機能しません。

私のコードは：

Widget build(BuildContext context) {
return new Scaffold(

  body: Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 160.0,
      child: ListView(
        children: <Widget>[
          Text("First line"),
          HorizontalList(),
          Text("Second line"),
          HorizontalList()
        ],
      )
  ),

  drawer: new MyNavigationDrawer(),
);

}

また、ListTiles内にさまざまな水平リストを配置してみましたが、結果は同じです。

androidiosdartflutter
6
Andrea Grippi

あなたが欲しいのは別のリスト内のリストだと思いますここにあなたが従ったサンプルプログラムの適応があります

 Widget build(BuildContext context) {
    Widget horizontalList1 = new Container(
      margin: EdgeInsets.symmetric(vertical: 20.0),
      height: 200.0,
      child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 160.0, color: Colors.red,),
        Container(width: 160.0, color: Colors.orange,),
        Container(width: 160.0, color: Colors.pink,),
        Container(width: 160.0, color: Colors.yellow,),
      ],
    )
    );
    Widget horizontalList2 = new Container(
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 200.0,
        child: new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(width: 160.0, color: Colors.blue,),
        Container(width: 160.0, color: Colors.green,),
        Container(width: 160.0, color: Colors.cyan,),
        Container(width: 160.0, color: Colors.black,),
      ],
    )
    );
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Container(
          child: ListView(
            scrollDirection: Axis.vertical,
            children: <Widget>[
              horizontalList1,
              horizontalList2,
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

結果は次のようになります。

enter image description here

それが役に立てば幸い

10
Dhaval Shah