小部件根据Listview内容扩展的高度

Question

我试图将扩展小部件的高度设置为其内部Listview的大小，但我没有得到它，下面是代码：

使用下面的代码，列表视图非常小并且缩小了，我想为内容设置一个大小或保留自动大小，我已经尝试过从Expanded更改为Flexible With fit:flexfit.lose，但它也不起作用

class ProdutoPage extends GetView<ProdutosController> {
final controller = Get.find<ProdutosController>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('${Get.arguments}'),
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(
bottom: 1.0, left: 1.0, right: 8.0, top: 1.0),
child: Badge(
position: BadgePosition.topEnd(top: 2, end: 2),
badgeColor: Colors.red.shade800,
badgeContent: Text(
controller.itensCarrinho.length.toString(),
style: TextStyle(color: Colors.white),
),
child: IconButton(
icon: Icon(Icons.shopping_cart_rounded),
iconSize: 40.0,
onPressed: () {},
),
),
)
],
),
body: SingleChildScrollView(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Container(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Cores:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,                        
itemCount: controller.produtosCoresList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosCoresList[index].cor),
leading: Radio(
value: controller.produtosCoresList[index].cor,
groupValue: 'ROSA',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
}),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Tamanho:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Expanded(
child: Obx(
() => ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: controller.produtosTamanhoList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
dense: true,
contentPadding:
EdgeInsets.only(left: 3.0, right: 0.0),
visualDensity:
VisualDensity(horizontal: 0, vertical: -4),
title:
Text(controller.produtosTamanhoList[index].tam),
leading: Radio(
value: controller.produtosTamanhoList[index].tam,
groupValue: 'IG',
onChanged: (value) {},
activeColor: Colors.red.shade800,
),
);
},
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Quantidade:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 150.0, right: 150.0),
child: TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Gerais:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Text(
'Observações Internas:',
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.multiline,
minLines: 3,
maxLines: 5,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey.shade800, width: 2.0),
),
),
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
Divider(
height: 5.0,
color: Colors.black,
),
Padding(
padding: EdgeInsets.all(5.0),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: ElevatedButton(
onPressed: () {},
child: Text('Adicionar ao Carrinho'),
style: ElevatedButton.styleFrom(
minimumSize: Size(400, 60),
textStyle: TextStyle(fontSize: 18),
),
),
)
],
),
),
),
),
);
}
}

Answer 1

您的列相当复杂，我建议您使用CustomScrollView，reference。

在自定义滚动视图中：

• 将ListView小部件更改为SliverList
• 将"填充"小部件更改为"SliverPadding">
• 在SliverToBoxAdapter中包装文本小部件
• 在SliverToBoxAdapter中包装Divider小部件

并查看其工作原理。