如何在显示对话框（Flutter）中使用页面浏览量？

Question

第一部分是我想用Flutter在对话框中制作的自动页面。

这是我用来尝试的代码，但我无法达到我想要的效果

请通过在对话框中显示 pageView 和自动指示器来帮助我解决这个问题

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PageController _controller = PageController(initialPage: 0);

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text("Show Dialog"),
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => AlertDialog(
                title: const Text('Warning'),
                content: PageView(
                  controller: _controller,
                  children: [
                    Container(width: double.infinity, height: double.infinity, color: Colors.yellow),
                    Container(width: double.infinity, height: double.infinity, color: Colors.red),
                    Container(width: double.infinity, height: double.infinity, color: Colors.black),
                  ],
                ),
                actionsAlignment: MainAxisAlignment.center,
                actions: <Widget>[
                  Column(
                    children: [
                      ElevatedButton(onPressed: () {}, child: const Text("CONTINUE")),
                      OutlinedButton(onPressed: () {}, child: const Text("NO THANKS"))
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 1

我们需要在 PageView 上提供尺码。根据您所附的图片，我使用 LayoutBuilder 来获取 constraints 并提供对话框的 30% 高度。使用 constraints 提供大小。

showDialog(
    context: context,
    builder: (BuildContext context) =>
        LayoutBuilder(builder: (context, constraints) {
          debugPrint("${constraints.toString()}");
          return AlertDialog(
            title: const Text('Warning'),
            content: Column(
              children: [
                SizedBox(
                  height: constraints.maxHeight * .3,
                  width: constraints.maxWidth,
                  child: PageView(
                    controller: _controller,
                    children: [
                      Container(color: Colors.yellow),
                      Container(color: Colors.red),
                      Container(color: Colors.black),
                    ],
                  ),
                ),
              ],
            ),
            actionsAlignment: MainAxisAlignment.center,
            actions: <Widget>[
              Column(
                children: [
                  ElevatedButton(
                      onPressed: () {},
                      child: const Text("CONTINUE")),
                  OutlinedButton(
                      onPressed: () {},
                      child: const Text("NO THANKS"))
                ],
              ),
            ],
          );
        }));

如果您发现添加许多小部件后内容溢出 SingleChildScrollView

showDialog(
    context: context,
    builder: (BuildContext context) =>
        LayoutBuilder(builder: (context, constraints) {
          debugPrint("${constraints.toString()}");
          return AlertDialog(
            title: const Text('Warning'),
            content: SingleChildScrollView(
              child: Column(

更多关于LayoutBuilder

如何在显示对话框（Flutter）中使用页面浏览量？

How to use the pageview inside show dialog (Flutter)?

flutter

flutter-layout

flutter-animation