如何在颤动中删除文本或列表图块与框装饰边框之间的空间？

Question

我有一个问题想要为抽屉列表项创建边框和圆形框。我可以创建边框和圆形框，但是问题是文本和图标与周围的框之间的空间太大。

我尝试了几种纯粹使用容器的方法，容器和列表图块都给了我相同的结果。我也尝试过同样的填充。 下面是不同的编码。

Column(children: <Widget>[
       //Padding(padding:const EdgeInsets.fromLTRB(15, 0, 10, 10)), 
       Container(
         height: 55,
        padding: new EdgeInsets.fromLTRB(0, 0, 0, 0),
        margin: EdgeInsets.symmetric(vertical: 10.0),

        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          border: Border.all(color: Colors.black),
        ),

        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[

                      IconButton(
                        icon: Icon(Icons.map),
                        onPressed: () => {},
                      ),
                      Padding(padding: EdgeInsets.only(left: 20.0)),
                      Text("TEST"),
                    ],
                  ),
          ]
        ),
       ),
       Container(
       margin: const EdgeInsets.fromLTRB(5, 0, 5, 5),
       alignment: Alignment.bottomRight,


       child: ListTile(
            leading: new Icon(Icons.map),
            title: Text("Map View"),
            trailing: Icon(Icons.arrow_forward),

          ),
       decoration: BoxDecoration(

        color: getColor(title,"Dashboard"),
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(8.0),
            topRight: Radius.circular( 8.0),
            bottomLeft: Radius.circular( 8.0),
            bottomRight: Radius.circular( 8.0),
        )
        ),

        ),
        Ink(
          color: getColor(title,"Dashboard"),
          child: ListTile(
            leading: new Icon(Icons.map),
            title: Text("Map View"),
            trailing: Icon(Icons.arrow_forward),

          ),
        ),
         Padding(padding:const EdgeInsets.fromLTRB(5, 0, 10, 10)), 
        ListTile(
          leading: new Icon(Icons.map),
          title: Text("Map View"),
          trailing: Icon(Icons.arrow_forward),

        ),
        ListTile(
          leading: new Icon(Icons.map,color: Colors.blue,),
          title: Text("List View"),
          trailing: Icon(Icons.arrow_forward),

        ),
      ],
)

我也附加了图像输出。我更喜欢第二种选择，但是框中有太多空格和文字？

这是我更新的代码。

列（子级：[

          Container(

padding: EdgeInsets.all(5.0),
                  margin: EdgeInsets.symmetric(vertical: 10.0),

                  decoration: BoxDecoration(
                    color: getColor(title,"Dashboard"),
                    borderRadius: BorderRadius.circular(6.0),
                    border: Border.all(color: Colors.amber),
                  ),
                  child:Row(children: <Widget>[
                    Icon(Icons.map),
                      SizedBox(width: 10),
                      Text("Map View"),
                      Expanded(child: Container (),),
                      Icon(Icons.arrow_forward),]
                      )

        ),
        Container(

padding: EdgeInsets.all(5.0),
                  margin: EdgeInsets.symmetric(vertical: 10.0),

                  decoration: BoxDecoration(
                    color: getColor(title,"Dashboard"),
                    borderRadius: BorderRadius.circular(6.0),
                    border: Border.all(color: Colors.amber),
                  ),
                  child:Row(children: <Widget>[
                    Icon(Icons.map),
                      SizedBox(width: 10),
                      Text("Map View"),
                      Expanded(child: Container (),),
                      Icon(Icons.arrow_forward),]
                      )

        ),
        ]),

Answer 1

您可能希望放弃ListTile，转而使用自定义Row。

Row(children: [
Icon(Icons.map),
SizedBox(width: 10),
Text("Map View"),
Expanded(child: Container (),),
 Icon(Icons.arrow_forward),])

（抱歉，我在手机上键入此代码时，代码混乱。）

借助此功能，您可以更好地控制填充和行中小部件之间的空间。