在ListView / GridView中连续创建类别产品

Question

我要在搜索列旁边创建一个搜索列及其搜索图标。 在它们下面有一些类别。

我希望使其类似于以下示例。 https://imgur.com/Xmi1x30

我不知道代码如何像上面的SS那样制作2个盒子。

但是结果是这样的： https://imgur.com/EtOZY1M

body: ListView (
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
                hintText: "Search",
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(25.0)))),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Image.asset('images/Otomotif.png'),
              Image.asset('images/user.png'),
              Image.asset('images/returnbarang.png'),
              Image.asset('images/Vouchersaya.png')
            ],
          ),
          Text('PRODUK TERLARIS'),
           ],
          )
        ]
      )

希望您能帮我找到解决方案。谢谢：）

Answer 1

尝试此代码

 ListView (
    children: <Widget>[
      TextField(
        decoration: InputDecoration(
            hintText: "Search",
            prefixIcon: Icon(Icons.search),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(25.0)))),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Image.asset('images/Otomotif.png'),
          Image.asset('images/user.png'),
          Image.asset('images/returnbarang.png'),
          Image.asset('images/Vouchersaya.png')
        ],
      ),
      Text('PRODUK TERLARIS'),
       Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          items(),
          items()
        ],
      ),


       ],
      )
    ]
  )


items(){
    return Container(
      margin: EdgeInsets.all(6.0),
      width: (MediaQuery.of(context).size.width - 24 )  / 2,
      decoration: BoxDecoration(
          border: Border.all(width: 1),
      ),
      child: ListTile(
        title: Text("Title"),
        subtitle: Text("subtitle"),
        trailing: Image.asset("images/toy.png",height: 60,width: 60,),

      ),
    );
  }