PageView 导致无限高度错误

Question

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void openModal() {
    showModalBottomSheet<dynamic>(
        isScrollControlled: true,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20))),
        context: context,
        builder: (_) {
          return Wrap(
            children: [
              ModalSheetContent(),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FloatingActionButton(
          onPressed: openModal,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}
class ModalSheetContent extends StatefulWidget {
  const ModalSheetContent({Key? key}) : super(key: key);

  @override
  _ModalSheetContentState createState() => _ModalSheetContentState();
}

class _ModalSheetContentState extends State<ModalSheetContent> {
    final PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: PageView(
        controller: pageController,
        children: [imageVideo(context), Pricing()],
      ),
    );
  }

我希望 modalSheet 根据其内容而不是全屏采用动态高度。我尝试用 Column 和 Expanded 包装 PageView 但它没有用。

错误：

视口在横轴上扩展以填充它们的容器并限制它们的子级以匹配它们在横轴上的范围。在这种情况下，水平视口被赋予了无限量的垂直 space，其中 expand.The 相关的导致错误的小部件是 PageView

Answer 1

PageView 必须有一个 flutter 的高度，通常它占据了屏幕的最大部分，但在你的情况下你是在 bottomsheet 中显示它，我假设你的 bottomsheet 应该几乎是全屏的，所以试着给它身高

final size = MediaQuery.of(context).size;
……
SizedBox(
    height: size.height - 100;
    child: PageView(…),
)

Answer 2

如果您希望您的底部 sheet 根据其上下文采用动态高度，只需将您的小部件包装到列小部件中并添加此属性。

Column(
mainAxisSize:MainAxisSize.min,
children:[...]
)

PageView 导致无限高度错误

PageView is causing unbounded height error

flutter