Flutter中如何让ListView子项根据内容自适应高度?
让ListView子项根据内容自适应尺寸
在ListView中,通常需要指定列表项的高度,但我希望让列表项根据其子组件内容自适应高度,效果如下:

注意:数据将从服务器加载。
列表项代码
import 'package:flutter/material.dart'; class EditExperienceItemWidget extends StatelessWidget { const EditExperienceItemWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; return Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), ), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Flexible( flex: 2, child: Row( children: [ Flexible( flex: 1, child: Container( child: Text('1'), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.white, border: Border.all( color: Theme.of(context).primaryColor, width: 1, style: BorderStyle.solid, ), ), ), ), Flexible( flex: 3, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Flexible( child: Text('UI/UX Designer'), flex: 1, ), Flexible( child: Text('Gate Way'), flex: 1, ), Flexible( child: Text('27/12/2020 - 11/4/2021'), flex: 1, ), ], ), ), Flexible( flex: 1, child: IconButton( onPressed: () {}, icon: Icon( Icons.edit, color: Theme.of(context).primaryColor, size: 22, ), ), ) ], ), ), Divider( thickness: 1, indent: 30, endIndent: 30, ), Flexible( flex: 3, child: Text( 'I felt really good at ZazaPay it was a very ui we did lots of stuff in a friendly place with very special people'), ) ], ), ); } }
页面代码
import 'package:dozar/screen/edit_experience_screen/widget/edit_experience_item_widget.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; class EditExperienceScreen extends StatelessWidget { const EditExperienceScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; return Scaffold( backgroundColor: Theme.of(context).backgroundColor, body: SafeArea( child: Container( padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16), child: Column( children: [ Row( children: [ IconButton( onPressed: () { Get.back(); }, icon: Icon( Icons.keyboard_arrow_left, color: Colors.black, ), ), SizedBox(width: 10,), Text( 'Edit Experiences', style: Theme.of(context).textTheme.titleLarge, ), ], ), SizedBox( height: 10, ), Expanded( child: ListView.separated( itemBuilder: (context, index) { return EditExperienceItemWidget(); }, separatorBuilder: (context, index) { return SizedBox( height: 10, ); }, itemCount: 5, ), ), ], ), ), ), ); } }
我使用了名为EditExperienceItemWidget的无状态自定义组件。
内容的提问来源于stack exchange,提问作者Muhamad Haydar Jawad
相关产品推荐
相关产品推荐

