在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,),

      ),
    );
  }