关于listview：Flutter：指定ListTile的高度


Flutter: Specify ListTile height

在这段代码中，我试图在页面的顶部列出按钮或平铺列表，"因为按钮对我来说不合适"。因此，当单击一个按钮时，它将在页面的其余部分返回一个值。

问题是这里的图块在页面的一半以上扭曲，这使其看起来不一致。我想限制图块的高度，我尝试将它们并排放置并放置在一个容器中，但这是行不通的。任何帮助将不胜感激。

运行代码后的结果是：

这是运行代码后的错误：
enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
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'),)
    ],),
       
        );
         
        }
}
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    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'),
                    )
                  ],
                ),
相关讨论

在ListView属性中添加一个itemExtent，itemExtent定义每个子项的大小。像这样吗?????

1
2
3
4
5
6
7
8
9
 ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: 5,
  itemExtent: 50,
  itemBuilder: (context, index) {
    return TistTile()
  }
 )

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

1
2
3
4
5
6
7
8
  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：

如果需要更多自定义，则应使用容器或填充而不是ListTile。

您不能设置高度，但是可以通过将密实属性设置为true来减小高度：

1
2
3
4
5
6
7
8
9
10
11
12
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：

A single fixed-height row that typically contains some text as well as
a leading or trailing icon.

To be accessible, tappable leading and trailing widgets have to be at
least 48x48 in size. However, to adhere to the Material spec, trailing
and leading widgets in one-line ListTiles should visually be at most
32 (dense: true) or 40 (dense: false) in height, which may conflict
with the accessibility requirement.

For this reason, a one-line ListTile allows the height of leading and
trailing widgets to be constrained by the height of the ListTile. This
allows for the creation of tappable leading and trailing widgets that
are large enough, but it is up to the developer to ensure that their
widgets follow the Material spec.

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