如何在Flutter中指定ListTile高度

snvhrwxg  于 2023-08-07  发布在  Flutter
关注(0)|答案(5)|浏览(567)

在这段代码中,我试图在页面的最上方列出一个按钮或平铺块列表,“因为按钮不适合我”。因此,当点击一个页面时,它返回页面其余部分的值。
问题是这里的瓷砖toke周围超过一半的页面,这使它看起来不一致。我想限制瓷砖的高度,我试过把他们排成一排和一个容器,它不工作。任何帮助将不胜感激。
运行代码后的结果是:
这是运行代码后的错误:

的数据

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

字符串

qzlgjiam

qzlgjiam1#

应用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。
但是,不能将此方法用于特定的宽度或高度大小。

ulmd4ohb

ulmd4ohb2#

只需删除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'),
                    )
                  ],
                ),

字符串

bvuwiixz

bvuwiixz3#

如果您需要更多的自定义,您应该使用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,                  
            );
          },
        );

字符串
列表平铺:
一个固定高度的行,通常包含一些文本以及前导或尾随图标。
要访问,可点击的前导和尾随小部件的大小必须至少为48x48。然而,为了遵守Material规范,单行ListTiles中的尾随和前导小部件在视觉上应该最多为32个(密集:true)或40(密度:false)的高度,这可能与可访问性要求相冲突。
出于这个原因,单行ListTile允许由ListTile的高度约束前导和尾随小部件的高度。这允许创建足够大的可点击的前导和尾随小部件,但这取决于开发人员确保他们的小部件遵循Material规范。
https://api.flutter.dev/flutter/material/ListTile-class.html

zrfyljdw

zrfyljdw4#

因为ListTile中没有height属性,所以你可以通过将平铺放置在SizedBox中来限制平铺的大小:

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

字符串

enxuqcxy

enxuqcxy5#

也许你可以在ListTile中使用minVerticalPadding

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

字符串

相关问题