flutter 如何避免模态底部表中的列中的底部溢出?

svujldwt  于 2023-05-01  发布在  Flutter
关注(0)|答案(2)|浏览(160)

我还不明白如何避免模态底部表单中的列的底部溢出。
我不想要一个可滚动的行为,我只是想列是正确的高度,其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,
      ),
    );
  }
}
sq1bmfud

sq1bmfud1#

我已经解决了这个问题,只需将isScrollControlled参数添加到showModalBottomSheet,如下代码:

onPressed: () {
        showModalBottomSheet(
          isScrollControlled: true,
x6yk4ghg

x6yk4ghg2#

尝试将ExpandedColumnListView一起使用

showModalBottomSheet(
 context: context,
 builder: (BuildContext context) {
  return Container(
    // Add decoration or other styling here
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Header'),
        Expanded(
          child: ListView(
            shrinkWrap: true,
            children: [
              // Add your list items here
            ],
          ),
        ),
      ],
    ),
  );
 },
);

相关问题