[英]How to specify ListTile height in Flutter
在此代码中,我试图在页面顶部制作一个按钮或图块列表,“因为按钮对我来说效果不佳”。 因此,当单击一个时,它会在页面的 rest 中返回一个值。
问题是这里的图块占据了页面的一半以上,这使得它看起来不一致。 我想限制瓷砖的高度,我试过将它们放在一排和一个容器中,但它不起作用。 任何帮助将不胜感激。
运行代码后的结果是:
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'),)
],),
);
}
}
在你的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
:
只需移除Expanded
Widget 以避免填充可用空间并使用具有固定高度的父容器,与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'),
)
],
),
如果您需要更多自定义,您应该使用 Container 或 Padding 而不是 ListTile。
您无法设置高度,但可以通过将密集属性设置为 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,
);
},
);
列表磁贴:
单个固定高度的行,通常包含一些文本以及前导或尾随图标。
要易于访问,可点击的前导和尾随小部件的大小必须至少为 48x48。 但是,为了遵守 Material 规范,单行 ListTiles 中的尾随和前导小部件的高度在视觉上最多应为 32(密集:真)或 40(密集:假),这可能与可访问性要求相冲突。
出于这个原因,一行 ListTile 允许前导和尾随小部件的高度受 ListTile 的高度限制。 这允许创建足够大的可点击的前导和尾随小部件,但开发人员需要确保他们的小部件遵循 Material 规范。
https://api.flutter.dev/flutter/material/ListTile-class.html
由于 ListTile 中没有 height 属性,您可以通过将其放置在 SizedBox 中来限制图块的大小:
SizedBox(
height: 32,
child: ListTile(..))
应用VisualDensity
允许您扩展或收缩列表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。
但是,您不能将此方法用于特定的宽度或高度大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.