带有抖动的列表项UI设计

Question

我是初学者。

我有一个锁形图标图像，需要在单元格中显示一半，在单元格中显示一半。

我想为ListItem创建UI。

我已经按如下所示编写了代码，但是它不起作用：

ListTile makeListTile() => ListTile(
  contentPadding:
  EdgeInsets.symmetric(horizontal: 10.0),

  title: Text(
    "Item Title",
    style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold),
  ),

  subtitle: Row(
    children: <Widget>[
      Expanded(
        flex: 0,
            child: Icon(Icons.settings, size: 20.0),),
      Expanded(
          flex: 4,
        child: Padding(
            padding: EdgeInsets.only(left: 10.0),
            child: Text("120",
                style: TextStyle(color: Colors.black54))),),
      Expanded(
        flex: 4,
        child: Padding(
            padding: EdgeInsets.only(left: 10.0),
            child: Text("150",
                style: TextStyle(color: Colors.black54))),
      ),
      Expanded(
        child: Padding(
            padding: EdgeInsets.only(left: 5.0, right: 5.0),
            child: Icon(Icons.add, size:  20,)),
      ),
      Expanded(
        child: Padding(
            padding: EdgeInsets.only(left: 10.0, right: 10.0),
            child: Text("1",
                style: TextStyle(color: Colors.black54))),),
      Expanded(
        child: Padding(
            padding: EdgeInsets.only(left: 5.0, right: 5.0),
            child: Icon(Icons.add, size:  20,)),
      )
    ],
  ),
  trailing:
      new Stack(
        children:[
      Icon(Icons.lock, size: 20.0)
      ]),
  onTap: () {

  },
);

请帮助我。

谢谢。

Answer 1

我建议您先尝试一下，因为这将有助于学习构建UI的另一种方法。如果很紧急，那么这里是代码。但是，再次我建议您先尝试一下。您需要根据需要更改虚拟物品中的所有内容。

Stack(
                  children: <Widget>[
                    Container(
                      margin: const EdgeInsets.all(15.0),
                      decoration: BoxDecoration(
                          shape: BoxShape.rectangle,
                          borderRadius: BorderRadius.circular(10.0),
                          border: Border.all(width: 2.0, color: Colors.yellow)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: Text(
                                  'Item Name',
                                  style: TextStyle(
                                      color: Colors.yellow, fontSize: 14.0),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.all(5.0),
                                child: Icon(
                                  Icons.close,
                                  color: Colors.yellow,
                                  size: 30.0,
                                ),
                              )
                            ],
                          ),
                          Padding(
                            padding: const EdgeInsets.only(bottom: 5.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.adjust,
                                      color: Colors.yellow,
                                      size: 20.0,
                                    ),
                                    Text(
                                      'Dummy Text',
                                      style: TextStyle(
                                          color: Colors.yellow, fontSize: 14.0),
                                    )
                                  ],
                                ),
                                Row(
                                  children: <Widget>[
                                    Icon(
                                      Icons.add_circle_outline,
                                      color: Colors.yellow,
                                      size: 20.0,
                                    ),
                                    Padding(padding: const EdgeInsets.all(2.0)),
                                    Text(
                                      '1',
                                      style: TextStyle(
                                          color: Colors.yellow, fontSize: 14.0),
                                    ),Padding(padding: const EdgeInsets.all(2.0)),
                                    Icon(
                                      Icons.remove_circle,
                                      color: Colors.yellow,
                                      size: 20.0,
                                    ),
                                    Padding(padding: const EdgeInsets.all(5.0))
                                  ],
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Icon(
                        Icons.group,
                        size: 30.0,
                        color: Colors.yellow,
                      ),
                    )
                  ],
                )

这是现在的样子：

Answer 2

1个使用堆栈小部件 2加高卡 3添加右侧图标 4添加列 5在列内添加行