如何在 Flutter 中指定 ListTile 高度

Posted 2023-02-23

【中文标题】如何在 Flutter 中指定 ListTile 高度

【英文标题】：How to specify ListTile height in Flutter

【发布时间】：2019-04-03 22:00:08

【问题描述】：

在这段代码中，我试图在页面的最顶部制作一个按钮或图块列表，“因为按钮对我来说效果不佳”。因此，当单击一个时，它会在页面的其余部分返回一个值。

问题是这里的磁贴占据了页面的一半以上，这使得它看起来不一致。我想限制瓷砖的高度，我尝试将它们放在一排和一个容器中，但它不起作用。任何帮助将不胜感激。

运行代码后的结果是：

这是运行代码后的错误：

class HomePage extends StatefulWidget 
 // const HomePage(Key key) : super(key: key);

  @override
  HomePageState createState() 
    return new HomePageState();
  


class HomePageState extends State<HomePage> 
List<String> temp=new List();
List<String> temp1=['Nile University', 'Smart Village', 'Zewail'];
Map<String,String> map1=;
@override
void initState() 
    super.initState();
  getplaces(temp);
  getuser(map1,'1jKpg81YCO5PoFOa2wWR');

  


Future<List> getuser(temp,String place) async
  List<String> userids=[];
  QuerySnapshot usersubs= await  Firestore.instance.collection('tempSubs').getDocuments();
  QuerySnapshot userid= await  Firestore.instance.collection('users').where('place',isEqualTo: place).getDocuments();
  userid.documents.forEach((DocumentSnapshot doc,)
  usersubs.documents.forEach((DocumentSnapshot doc1)
    if(doc.documentID==doc1.documentID)
      doc1.data['products'].forEach((k,v)
       
       if( DateTime.fromMillisecondsSinceEpoch(v).day==DateTime.now().day)

        int x= DateTime.fromMillisecondsSinceEpoch(v).day;
                print('keey equal $k and v is $x');

        print('dy is $x');
      userids.add(
      doc.documentID);
       
      );
      
    
   );   
    );
              print('doc.documentID');
  print (userids);
   setState(() );
 return userids;
  


Future<List> getplaces(temp) async
    QuerySnapshot place= await  Firestore.instance.collection('places').getDocuments();
  place.documents.forEach((DocumentSnapshot doc)
    temp.add(
      doc.data['name']
    );
            //  print(doc.data['name']);

  );
  //  print(temp);
 
   setState(() );
 return temp;
  



  @override
  Widget build(BuildContext context) 
      return Scaffold(
      appBar: AppBar(
         title: Text("Home Page"),
        ),
          
  body: !temp.isNotEmpty? 
   CircularProgressIndicator():  
   Row(mainAxisSize:MainAxisSize.max,
   mainAxisAlignment: MainAxisAlignment.spaceAround,

     children:<Widget>[ 
        Container(
                      height: 100.0,
                      child:
           ListView.builder(
             scrollDirection: Axis.horizontal,
             itemExtent: 100.0,
             itemCount:temp.length,
             itemBuilder:(BuildContext context, int index) 
                return ListTile(title: Text(temp[index]),onTap:
                ()
                  print(temp[index]);
                
                 );
     ),),
     Container(child:Text('data'),)
    ],),
       
        );
          
        

【问题讨论】：

请谨慎分享您的代码，有一些我们看不到的名为temp 的值，并且您的代码有额外的括号（可能是类的剩余部分）

【参考方案1】：

在您的ListView 属性中添加这个itemExtent，itemExtent 定义每个孩子的大小。像这样⬇️

 ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: 5,
  itemExtent: 50,
  itemBuilder: (context, index)  
    return TistTile()
  
 )

并在您的ListTile 属性中实现这个dense:true，dense 参数使文本更小并将所有内容打包在一起。像这样⬇️

  ListTile(
   title: Text("Tony Stark"),
   subtitle: Text("list[index].name",
        style: TextStyle(fontSize: 14.0),),
   contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 
        16.0),
   dense:true,
   );

您可以通过设置contentPadding 来更改内容在左侧和右侧（但不是顶部或底部）的插入量。默认为16.0，但这里我们将设置为0.0：

【讨论】：

谢谢，“dense:true”对于正确对齐至关重要。

您还可以将visualDensity: VisualDensity.compact 添加到 ListTile 以使其更小。

【参考方案2】：

只需移除Expanded Widget 以避免填充可用空间并使用固定高度的父Container，与itemExtent 值相同：

    Column(
                  children: <Widget>[
                    Container(
                      height: 100.0,
                      child: ListView.builder(
                          scrollDirection: Axis.horizontal,
                          itemExtent: 100.0,
                          itemCount: temp.length,
                          itemBuilder: (BuildContext context, int index) 
                            return ListTile(
                                title: Text(temp[index]),
                                onTap: () 
                                  print(temp[index]);
                                );
                          ),
                    ),
                    Container(
                      child: Text('data'),
                    )
                  ],
                ),

【讨论】：

我已经尝试过了，但是出现了这个错误：在 performResize() 期间抛出了以下断言：水平视口被赋予了无限的宽度。 I/flutter (13308)：视口在滚动方向上扩展以填充其容器。在这种情况下，水平 I/flutter (13308)：视口被赋予了无限量的水平空间来扩展。这种情况 I/flutter (13308)：通常发生在可滚动小部件嵌套在另一个可滚动小部件中时。 I/flutter (13308)：如果此小部件始终嵌套在可滚动小部件中，则无需使用视口

我不知道为什么会这样

我写的和你一样，但它仍然显示我将在我的代码上编辑的错误，请看一下

好的，但这和我的代码不一样，你使用的是 Row ，它应该是 Column ，检查你的 CircularProgressIndicator() 下方的代码

如果你把你想要的设计截图，我可以帮你。

【参考方案3】：

如果您需要更多自定义，您应该使用 Container 或 Padding 而不是 ListTile。

您无法设置高度，但可以通过将 dense 属性设置为 true 来使其更小：

ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: list.length,
          itemBuilder: (context, index) 
            return ListTile(
              title: Text(list[index].name,style: TextStyle(fontSize: 20.0),),
              contentPadding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
              dense:true,                  
            );
          ,
        );

ListTile：

一个固定高度的行，通常包含一些文本以及 前导或尾随图标。

为了便于访问，可点击的前导和尾随小部件必须位于 尺寸至少为 48x48。但是，为了遵守材料规范，尾随 单行 ListTiles 中的前导小部件在视觉上最多应为 32 (dense: true) 或 40 (dense: false) 高度，可能会发生冲突 具有可访问性要求。

因此，单行 ListTile 允许前导高度和 受 ListTile 高度约束的尾随小部件。这 允许创建可点击的前导和尾随小部件 足够大，但由开发人员来确保他们的 小部件遵循 Material 规范。

https://api.flutter.dev/flutter/material/ListTile-class.html

【参考方案4】：

由于 ListTile 中没有 height 属性，您可以通过将 tile 放置在 SizedBox 中来限制它的大小：

          SizedBox(
              height: 32,
              child: ListTile(..))

【参考方案5】：

应用VisualDensity 允许您扩大或缩小列表图块的高度。 VisualDensity 是 UI 元素的紧凑性。这是一个例子：

// negative value to contract
ListTile(
  title: Text('Tile title'),
  dense: true,
  visualDensity: VisualDensity(vertical: -3), // to compact
  onTap: () 
    // tap actions
  ,
)

// positive value to expand
ListTile(
  title: Text('Tile title'),
  dense: true,
  visualDensity: VisualDensity(vertical: 3), // to expand
  onTap: () 
    // tap actions
  ,
)

值范围从 -4 到 4，在撰写此答案时默认为 0。

但是，您不能将此方法用于特定的宽度或高度尺寸。