微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

android – Flutter中水平列表的列表

我已经按照这个tutorial并完全实现了一个水平滚动列表.
现在,我想要做的是创建一个垂直列表,其中每一行都是一个水平列表.

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

我的代码是:

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中,但结果是一样的.

解决方法:

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

 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

希望能帮助到你

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐