Flutter中的水平列表列表 [英] List of horizontal list in Flutter

问题描述

我已遵循教程的要求，并完全实现了水平滚动列表. 现在，我想做的是创建一个垂直列表，其中每一行都是一个水平列表.

I have followed this tutorial and fully implemented a horizontally scrolling list. Now, what I would like to do is to create a vertical list where each row is a horizontal list.

我尝试了不同的方法，但是我一直认为应该可以将水平列表简单地设置为垂直列表的子级，但这是行不通的.

I tried different approaches, but i keep thinking that it should be possible to simply set the horizontal list as a child of the vertical, but it doesnt' work.

我的代码是:

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中，但结果是相同的.

I also tried putting the various horizontal lists inside ListTiles but the result is the same.

推荐答案

我想您想要的是另一个列表中的列表 这是您遵循的示例程序的改编 构建方法类似于:

I guess what you want is a list within a another list Here is the adaptation of the sample program that you have followed The build method is like:

 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.
    );

结果类似于:

希望有帮助

这篇关于Flutter中的水平列表列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！