简体   繁体   English

如何调整 flutter 中的 ListTile 宽度

[英]How to tweak ListTile width in flutter

Now I am using ListTile like this in flutter:现在我在 flutter 中使用这样的 ListTile:

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Container(
                  color: Colors.white,
                  child: ListTile(
                    leading: Icon(Feather.settings),
                    title: Text("设置"),
                    onTap: () async {
                      Widget page = CustomSetting();
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => page),
                      );
                    },
                  ))
          )

this is the result now:这是现在的结果:

在此处输入图像描述

Now I want the ListTile not fill full of width of screen, keep left side and right side with some gap, but when I tweak the width of Container it does not have any change, what should I do to make it work?现在我希望 ListTile 不填满屏幕宽度,保持左侧和右侧有一些间隙,但是当我调整 Container 的宽度时它没有任何变化,我应该怎么做才能让它工作? the effect may like this:效果可能是这样的:

在此处输入图像描述

I added padding like this but still not work:我添加了这样的填充但仍然不起作用:

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Container(
                  color: Colors.white,
                  //margin: const EdgeInsets.only(left: 20.0, right: 20.0),
                  child: Padding(
                      padding: EdgeInsets.symmetric(horizontal: 40),
                      child: ListTile(
                        leading: Icon(Feather.settings),
                        title: Text("设置"),
                        onTap: () async {
                          Widget page = CustomSetting();
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => page),
                          );
                        },
                      ))))

Enclose it in a Padding widget.将其包含在 Padding 小部件中。

ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Container(
        color: Colors.white,
        child: Padding(
            padding: EdgeInsets.fromLTRB(100, 30, 100, 30),
            child: ListTile(
                leading: Icon(Feather.settings),
                title: Text("设置"),
                onTap: () async {
                Widget page = CustomSetting();
                Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => page),
                    );
                }, 
                )// ListTile
            ) // Padding
        ) // Container
) //  ClipRRect 

wrap your ClipRRect with padding用填充包裹你的 ClipRRect

Padding(
          padding: EdgeInsets.only(left:10,right:10),
        child:ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Container(
                  color: Colors.white,
                  child: ListTile(
                    leading: Icon(Icons.settings),
                    title: Text("设置"),
                  ))
          ),
        ),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM