[英]Flutter: Auto Vertical Height in ListView.builder
我正在嘗試使用 ListView.builder 顯示一些卡片
我想將每張卡片的高度自動設置為其子內容的高度
class HomePage extends StatelessWidget {
Widget _buildListItems(BuildContext context, DocumentSnapshot document) {
return Center(
child: Card(
child: Column(
children: <Widget>[
ListTile(
title: Text(document['title']),
subtitle: Text(document['subtitle']),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
document['summary'],
softWrap: true,
),
),
)
],
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
centerTitle: true,
),
body: StreamBuilder(
stream: Firestore.instance.collection('randomDB').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemExtent: 225.0,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
_buildListItems(context, snapshot.data.documents[index]),
);
},
),
}
當 document['summary'] 太長時,它會使文本溢出卡片小部件。 這次我所做的就是增加 ListView.Builder 中的 itemExtent
有沒有辦法動態設置ListView的高度?
只需添加shrinkWrap: true
。
& 刪除itemExtent: 225.0,
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
_buildListItems(context, snapshot.data.documents[index]),
},
),
我相信該列有一個叫做mainAxisSize
屬性的東西
Column(
mainAxisSize: MainAxisSize.min,
)
MainAxisSize.min
將使列大小拉伸到子項的最小大小。 與它相對的是MainAxisSize.max
,它將拉伸到它可以達到的最大尺寸。
但是我還沒有測試它。 希望它會有所幫助
你可以使用我的實現
Widget adapter(List<String> strings){
List<Widget> widgets= List<Widget>();
for(int i=0;i<strings.length;i++){
widgets.add(Text(strings[i]));
}
Row row=Row(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children:widgets
),
],
);
return row;
}
此示例顯示字符串列表
只是不要指定itemExtent
參數。
或者只是給它一個null
值,而不是225.0
這樣,孩子將在ListView
獲得其確切所需的高度
創建自定義ListView
itemBuilder
代碼示例如下:
Container(
child: ListView.builder(
padding: EdgeInsets.all(5),
itemCount: snapshot.data.length,
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
return generateColum(snapshot.data[index]);
}),
);
Widget generateColum(HouseholderModel item) => Card(
child: InkWell(
onTap: () {
},
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 5.0, top: 5.0, right: 5.0, bottom: 5.0),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: 70,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CircleAvatar(
radius: 25,
foregroundColor: Colors.transparent,
backgroundColor: appThemeColor.withOpacity(0.5),
child: CachedNetworkImage(
imageUrl: testImage,
)
),
Container(
padding: EdgeInsets.fromLTRB(8.0, 5.0, 0.0, 5.0),
width: MediaQuery.of(context).size.width * .60,
color: Colors.transparent,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"777 Brockton Avenue",
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: CustomTextStyle.textSubtitle2BlackShades(context),
),
Text(
'Michael Smith',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: CustomTextStyle.textSubtitle1blueShades(context),
)
],
),
),
],
),
),
),
Positioned(
bottom: 0.1,
right: 0.1,
child: Container(
padding: EdgeInsets.all(2),
decoration: BoxDecoration(
boxShadow: [BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
),],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(3.0),
bottomRight: Radius.circular(3.0)),
color: appThemeColor,
),
height: 15,
width: MediaQuery.of(context).size.width * .20,
child: Container(
alignment: Alignment.center,
child: FittedBox(fit:BoxFit.fitWidth,
child: Text('Vice-President', style: CustomTextStyle.textSubtitle1(context).copyWith(color: Colors.white),),)
),
),
),
],
),
),
);
嘗試
class HomePage extends StatelessWidget {
Widget _buildListItems(BuildContext context, DocumentSnapshot document) {
return Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
ListTile(
title: Text(document['title']),
subtitle: Text(document['subtitle']),
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
document['summary'],
softWrap: true,
),
),
)
],
),
),
);
}
ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
itemCount: provider.products.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () => viewProductDetail(provider.products[index]),
child: const OrderDetailsWidgets().orderedProducts(
title: provider.products[index].itemName ?? '',
price: '---',
img: provider.products[index].productImage ??
'request-list-image.png',
context: context,
),
);
},
),
為 listview.builder 添加零填充降低了高度
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.