flutter 如何删除允许底部工作表增长的默认高度限制？

yx2lnoni 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(104)

请考虑以下示例：

import 'package:flutter/material.dart';

void main() {
  const project = MaterialApp(
    home: HomeScreen(),
  );

  runApp(project);
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Widget bottomSheetView() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        /* ... */
      ],
    );
  }

  void gotoBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return bottomSheetView();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('HomeScreen'),
      ),
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () => gotoBottomSheet(),
            child: const Text('BottomSheet'),
          ),
        ),
      ),
    );
  }
}

如果你继续添加容器，最终你会遇到RenderFlex溢出错误，因为底部工作表默认有高度限制。
我怎样才能消除这样的限制，使最小大小的列可以增长更多？
这只是一个冗长的段落，因为它似乎是一个不幸的情况，即StackOverflow不喜欢主要内容是代码的问题。

flutter

来源：https://stackoverflow.com/questions/76542353/how-to-remove-the-default-height-limit-a-bottomsheet-is-allowed-to-grow

2条答案

按热度按时间

pkmbmrz71#

最简单的方法是用SingleChildScrollView Package bottomSheetView方法的Column，如下所示

Widget bottomSheetView() {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 128,
            height: 300,
            color: Colors.black,
          ),
          Container(
            width: 128,
            height: 400,
            color: Colors.red,
          ),
          Container(
            width: 128,
            height: 400,
            color: Colors.white,
          ),
          /* ... */
        ],
      ),
    );

在goToBottomSheet方法中添加isScrollControlled: true，如下所示

void gotoBottomSheet() {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return bottomSheetView();
      },
    );
  }

赞(0）回复(0）举报 2023-06-24

92vpleto2#

将bottomSheet小部件 Package 在Container小部件中，因为每个小部件都采用父小部件的高度，并且Container默认情况下具有0高度和0宽度。
在goToBottomSheet方法中添加