Flutter中水平列表的List

Question

我已经按照这个教程完全实现了水平滚动列表。 现在，我想做的是创建一个垂直列表，其中每一行都是一个水平列表。

我尝试了不同的方法，但我一直认为应该可以简单地将水平列表设置为垂直列表的子级，但它不起作用。

我的代码是：

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

Answer 1

我猜你想要的是另一个列表中的列表 这是您所遵循的示例程序的改编 构建方法如下：

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

结果是这样的：

希望有帮助

Answer 2

截图：

---

比方说，这是你的水平线

ListView

：

ListView _horizontalList(int n) {
  return ListView(
    scrollDirection: Axis.horizontal,
    children: List.generate(
      n,
      (i) => Container(
        width: 50,
        color: Colors.accents[i % 16],
        alignment: Alignment.center,
        child: Text('$i'),
      ),
    ),
  );
}

您可以将其放入

ListView

或

Column

中。

• 在

  ListView

  中：

  将水平列表包裹在

  SizedBox

  中并提供固定高度。

  ListView(
    children: [
      SizedBox(
        height: 50,
        child: _horizontalList(8),
      ),
      SizedBox(
        height: 50,
        child: _horizontalList(12),
      ),
      SizedBox(
        height: 50,
        child: _horizontalList(16),
      ),
    ],
  )
  

• 在

  Column

  中：

  您还可以使用

  Expanded

  /

  Flexible

  小部件。

  Column(
    children: [
      SizedBox(
        height: 50,
        child: _horizontalList(8),
      ),
      Expanded(
        child: _horizontalList(12),
      ),
      Flexible(
        child: _horizontalList(16),
      ),
    ],
  )
  

Answer 3

这是 flutter 中的水平列表生成器

          Expanded(
        child: ListView.builder(
          shrinkWrap: true,
          itemBuilder: (ctx,index){
            return Card(
              child: ListTile(
                  title: Text('Motivation $index'),
                  subtitle: Text('this is a description of the motivation')),
            );
          },
        ),
      ),