如何在Flutter中指定ListTile的高度

Question

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

问题在于这里的瓷砖占用了超过一半的页面空间，使其看起来不一致。我想限制瓷砖的高度，我尝试将它们放入行和容器中，但都不起作用。任何帮助都将不胜感激。

运行代码后的结果如下：

这是运行代码后出现的错误：

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'),)
    ],),
       
        );
          
        }
}

- Aya Elsisy

---

请仔细分享您的代码，有一些名为“temp”的值我们看不到，而且您的代码有额外的括号（可能是从类中遗留下来的）。 - salihgueler

Answer 1

应用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（截至回答撰写时）。

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

- DrGeneral

Answer 2

只需移除Expanded小部件以避免填充可用空间，然后使用具有固定高度的父容器，高度与itemExtent值相同：

只需删除Expanded小部件，使用一个父级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'),
                    )
                  ],
                ),

- diegoveloper

---

我已经尝试过了，但是出现了以下错误：在执行performResize()期间抛出了以下断言： 水平视口给出了无限制的宽度。 I/flutter (13308): 在滚动方向上，视口会扩展以填充其容器。在这种情况下，水平视口被赋予了无限量的水平空间来扩展。当一个可滚动的小部件嵌套在另一个可滚动的小部件中时，通常会出现这种情况。 I/flutter (13308): 如果这个小部件总是嵌套在一个可滚动的小部件中，那么就没有必要使用视口。 - Aya Elsisy

我不知道为什么会发生这种情况。 - Aya Elsisy

我写了和你一样的代码，但还是出现了错误。我会修改我的代码，请看一下。 - Aya Elsisy

好的，但这与我的代码不同，你使用了“行”，应该是“列”，请检查你的CircularProgressIndicator()下面的代码。 - diegoveloper

如果您提供一个关于您想要的设计的截图，我可以帮助您。 - diegoveloper

你的解决方案可行，但是listTile内部的小部件被对齐到了顶部而不是中心。看起来唯一的解决方法是创建自定义小部件。 - Jeremi

Answer 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。然而，为了遵循Material规范，在单行ListTiles中，密集模式（dense: true）下的前置和后置小部件在视觉上应最多为32个单位高，非密集模式（dense: false）下应最大为40个单位高，这可能与可访问性要求冲突。

因此，单行ListTile允许前导和后置小部件的高度受到ListTile高度的限制。这使得可以创建足够大的可点击的前导和后置小部件，但开发人员需要确保他们的小部件遵循Material规范。

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

- live-love

Answer 4

由于ListTile没有高度属性，您可以通过将其放置在SizedBox中来限制瓷砖的大小：

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

- Maxim Saplin

Answer 5

也许你可以在 ListTile 中使用 minVerticalPadding。

ListTile(
            minVerticalPadding: 16.w,
            title: Text(
              _list[index]['label'],
              style: TextStyle(
                fontSize: 16.sp,
                fontWeight: FontWeight.w600,
              ),
            ),
            trailing: _list[index]['widget'],
          ),

- QLJ球

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

minVerticalPadding 定义了瓷砖之间的最小间隙；它只能用于增大间隙，而不能减小间隙。 - undefined