我还不明白如何避免模态底部表单中的列的底部溢出。
我不想要一个可滚动的行为,我只是想列是正确的高度,其4个孩子,如果我使用SingleChildScrollView与NeverScrollableScrollPhysics(),最后一个属性卡小部件在底部得到削减,没有像素溢出。
如果我用一个扩展的列 Package ,我得到了一个底部溢出。
这个小部件在很多智能手机上都能正常工作,但在小型iPhone SE上就不行了。
这是我的代码,我已经编辑了,所以它可以很容易地运行,没有外部依赖:
import 'package:flutter/material.dart';
// classic flutter app example
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Center(
child: AttributionButton(),
));
}
}
// define each element of the bottom sheet = a card
class AttributionCard extends StatelessWidget {
final String cardName;
const AttributionCard({super.key, required this.cardName, required});
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
height: 80,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black, width: 1.0)),
child: InkWell(
borderRadius: BorderRadius.circular(10.0),
child: Container(
alignment: Alignment.center,
child: Text(cardName, style: const TextStyle(fontSize: 20)),
)),
),
);
}
}
// define the bottom sheet widget
class AttributionButton extends StatelessWidget {
const AttributionButton({super.key});
@override
Widget build(BuildContext context) {
return FloatingActionButton(
backgroundColor: Colors.transparent,
mini: true,
elevation: 0,
highlightElevation: 0,
heroTag: 'f10',
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.only(bottom: 12),
child: Column( //here overflows
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 12 / 2),
child: const Text('Attributions',
textAlign: TextAlign.start,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black))),
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.grey.withOpacity(0.23),
shape: const CircleBorder()),
onPressed: () {
Navigator.of(context).pop();
},
child: const Icon(
Icons.clear_sharp,
color: Colors.black,
)),
]),
const AttributionCard(
cardName: 'FlutterMap',
),
const AttributionCard(
cardName: '© OpenStreetMap',
),
const AttributionCard(
cardName: '© MapTiler',
),
const AttributionCard(
cardName: '© StadiaMaps',
),
],
),
);
},
);
},
child: const Icon(
Icons.info_outline_rounded,
color: Colors.black,
),
);
}
}
2条答案
按热度按时间sq1bmfud1#
我已经解决了这个问题,只需将
isScrollControlled
参数添加到showModalBottomSheet
,如下代码:x6yk4ghg2#
尝试将
Expanded
与Column
和ListView
一起使用