如何減少 ListTile 的“領先”和“標題”之間的邊距？ 撲

Question

前導和標題之間的邊距太大；

如何減少它； 我嘗試了幾種方法：

1. 用容器扭曲前導並將邊距設置為負；
2. 扭曲標題並設置 padding-left

然而，它根本不起作用； 有什么解決辦法嗎，我需要幫助

Answer 1

您最終最好構建自己的容器 - ListTile 沒有什么特別或復雜的地方。 這樣您就可以輕松自定義標題和按鈕之間的間距等內容。 只需使用這樣的東西：

  Container(
    padding: new EdgeInsets.symmetric(vertical: 6.0, horizontal: 6.0),
    margin: EdgeInsets.symmetric(vertical: 6.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(myLeadingIcon),
                    onPressed: () => {},
                  ),
                  Padding(padding: EdgeInsets.only(left: 20.0)),
                  Text(_myTitle),
                ],
              ),
    ...

Answer 2

對我有用的唯一答案是矩陣轉換標題小部件。

這里，標題文本填充減少了 16。

ListTile(
  leading: Icon(icon),
  title: Transform(
              transform: Matrix4.translationValues(-16, 0.0, 0.0),
              child: Text("Title text",
                          style: TextStyle(fontSize: 18, color: textPrimary)),
              ),
);

來源： 如何從 Flutter ListTile 設置前導和標題之間的填充？

Answer 3

更新

現在您還可以使用以下屬性：

1. horizontalTitleGap -標題和前導之間
2. minVerticalPadding -標題和副標題之間
3. minLeadingWidth -前導的最小寬度
4. contentPadding - 內部填充

老的

您可以使用visualDensity屬性來減少空間。

ListTile(
    visualDensity: VisualDensity(horizontal: -4, vertical: 0),
    title: Text("xyz")
);

visualDensity值可以從-4.0 to 4.0更改-4.0 to 4.0 。 值越低，視圖越緊湊。

PS 這個解決方案類似於一個不同的問題

這個問題是關於leading和title之間的差距。 但另一個問題是關於top/bottom間距

Answer 4

不要使用前導，只需在標題內使用 Row

title: Row(
    children: <Widget>[
       Icon(Icons.location_on,size: 15,color:ThemeManager.mainContentColor,),
       SizedBox(width: 8,),
       Text('DEMO'),
    ],
),

Answer 5

將minLeadingWidth設置為0 。

ListTile(
  minLeadingWidth: 0, // <-- Set this. 
  leading: Icon(Icons.settings),
  title: Text('Settings'),
)

Answer 6

在 ListTile 中，使用 contentPadding : EdgeInsets.fromLTRB() 然后您可以調整 R 值以適合您的設計。

一個容器的例子：

Container(
        child: ListTile(
          contentPadding: EdgeInsets.fromLTRB(10.0, 0.0, 250.0, 0.0),
          leading: CircleAvatar(
            backgroundColor: Colors.purpleAccent,
            child: Text('A'),
          ),
          trailing: Text(
            'Any Text here',
            style: const TextStyle(
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
            ),
          ),
        ),
      ),

Answer 7

我認為現在回復這個已經很晚了，但我認為這可以幫助其他人。 我遇到了類似的問題。 下面的代碼幫助我解決了這個問題：

Card(
  child: ListTile(
    leading: Icon(
      Icons.call,
      color: Colors.teal,
      size: 20
    ),
    title: Align(
      child: Text(
          "xxxxxxxxxx"
      ),
      alignment: Alignment(-1.3, 0),
    ),
    dense: true,
  )

因此，基本上將Alignment property to title和dense: true最終幫助我解決了這個問題。

注意：根據您的用例使用對齊值。

我希望這能幫到您！

Answer 8

我這幾天也有同樣的問題，最后我發布了一個可以解決這個問題的包。

該包可在https://pub.dev/packages/list_tile_more_customizable 獲得，使用該包我們可以設置水平標題間隙，當它設置為 0.0（零）時，前導和標題之間的填充將變為零。

用法：

ListTileMoreCustomizable(
    title: Text("Title"),
    trailing: Icon(Icons.people),
    horizontalTitleGap: 0.0, // This horizontalTitleGap can set the margin between 'leading' and 'title' and also between 'trailing' and 'title'.
    onTap: (details){},
    onLongPress: (details){},
);

編輯：
這種方法對我很有用，代碼也可以在https://github.com/Playhi/list_tile_more_customizable （原始代碼太長），我很難理解為什么一個用戶在沒有提交的情況下對答案投了反對票任何問題。

Answer 9

設置密集的 true 可能會解決您的問題。 ListTile（密集：真實）

Answer 10

您可以設置horizo​​ntalTileGap

ListTile( horizontalTitleGap: 0, //Set this. minLeadingWidth: 0, leading: Icon(Icons.settings), title: Text('Settings'),)

Answer 11

如果在 ListTile 或 ListView.separated 中使用 Divider 作為行，則將 Divider 高度設置為 0，因為 Divider 默認采用一些高度。

Divider(
              height: 0,
        );

這對我來說工作正常。

Answer 12

Flutter 2.0 升級后

ListTile 已收到 minLeadingWidth 屬性。 默認值為 40，因此通過 x 傳遞 minLeadingWidth: 40 - x 來減少前導和標題之間的空間。

對齊結果將取決於文本和平鋪寬度。

使用 Transform.translate 以獲得一致的結果。

ListTile(
  leading: Icon(icon),
  title: Transform.translate(
    offset: Offset(-16, 0),
    child: Text('Some text'),
  ),
);

Answer 13

自 2021 年 6 月 9 日起，您可以使用horizontalTitleGap像這樣實現：

ListTile(
      horizontalTitleGap: 2,
      title: Text("Title Number ${index + 1}")
)

Answer 14

設置minLeadingWidth: 0以消除前導和標題之間的間隙，設置horizontalTitleGap: 7以調整前導和標題之間的自定義間隙。

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: SvgPicture.asset(icChecked),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

如果您希望在CenterVertical領先，那么您必須將領先圖標包裝在Container

ListTile(
  minLeadingWidth: 0, // min width of leading; if 0 => leading won't take extra space 
  horizontalTitleGap: 7,  //gap between title and leading
  leading: Container(
    height: double.infinity,
    child: SvgPicture.asset(icChecked),
  ),
  title: const Text('Demo Text', style: tsWhiteSemiBold16),
),

您還可以使用contentPadding來調整ListTile子項的填充。