第一部分是一个自动页面,我想在一个带有flatter的对话框中创建它.

how to do this, is pageView and auto indicator into dialog flutter?

这是我用来try 的代码,但我无法得到我想要的

请通过在对话框中显示页面视图和自动指示器来帮助我

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"))
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

推荐答案

我们需要提供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相关问答推荐

为什么我不能看到类音频源在flutter?'

获取屏幕大小的滚动视图与动态大小?

修复容器`Text`和容器表单之间的重叠

下拉图标未居中

在Flutter 中创建自定义Snackbar类

Flutter -如何将导航轨道标签靠左对齐?

TextFormfield无法与自动路由一起正常工作

当键盘在抖动中打开时,如何才能看到包装在SingleChildScrollView中的列中的最后一个小工具?

有没有可能不在BlocBuilder中重新构建内容?

Flutter 需要 Xcode 14 或更高版本

Flutter中有没有办法区分鼠标左右平移?

Flutter:我的应用程序是否需要包含退款购买?

如何给按钮的边框半径?

即使小部件比Flutter 中的屏幕更宽,也始终显示滚动条

Flutter列顶部和底部出现不必要的边距问题

如何将 chrome web 模拟器添加到 vs code

容器在发布模式下显示灰色框(抖动)

如何获取 android 和 Ios (flutter) 的 CircularProgress 指示器?

在 flutter 中使用 Firebase 实时数据库数据创建无限滚动效果

带图像封面的 ElevatedButton