我希望bottomSheet的高度与它所包含的元素的高度相同,如下图所示。我使用了一个公共bottomSheet,其中包含一个包含不同项目的pageView
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
final PageController controller = PageController(initialPage: 0);
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Center(
child: ElevatedButton(
child: Text('BottomSheet'),
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadiusDirectional.only(
topEnd: Radius.circular(25),
topStart: Radius.circular(25),
),
),
builder: (context) => Container(
padding: EdgeInsetsDirectional.only(
start: 20,
end: 20,
bottom: 30,
top: 8,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 600,
child: PageView(
controller: controller,
children: <Widget>[
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: List.generate(
5,
(index) => Container(
height: 60,
margin:
EdgeInsetsDirectional.only(bottom: 10),
width: double.infinity,
color: Colors.yellow,
child: Center(
child: Text(
'Widgets $index',
style: TextStyle(fontSize: 20),
),
),
),
),
),
),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: List.generate(
10, (index) => Container(
height: 60,
margin:
EdgeInsetsDirectional.only(bottom: 10),
width: double.infinity,
color: Colors.yellow,
child: Center(
child: Text(
'Widgets $index',
style: TextStyle(fontSize: 20),
),
),
),),
),
),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: List.generate(
12, (index) => Container(
height: 60,
margin:
EdgeInsetsDirectional.only(bottom: 10),
width: double.infinity,
color: Colors.yellow,
child: Center(
child: Text(
'Widgets $index',
style: TextStyle(fontSize: 20),
),
),
),),
),
),
],
),
),
],
),
),
);
},
),
),
),
);
}
}
2条答案
按热度按时间ddhy6vgd1#
尝试使用
wrap
,不需要使用固定高度bfnvny8b2#
我解决了这个问题,你可以找到完整的代码
[here][1]
,就像这个图像---x1c 0d1x