Flutter中如何指定ListTile高度

Question

在此代碼中，我試圖在頁面頂部制作一個按鈕或圖塊列表，“因為按鈕對我來說效果不佳”。 因此，當單擊一個時，它會在頁面的 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'),)
    ],),
       
        );
          
        }
}

Answer 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 ：

Answer 2

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

Answer 3

如果您需要更多自定義，您應該使用 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

Answer 4

由於 ListTile 中沒有 height 屬性，您可以通過將其放置在 SizedBox 中來限制圖塊的大小：

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

Answer 5

應用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。

但是，您不能將此方法用於特定的寬度或高度大小。