Flutter:-如何将视图放置在屏幕的中心和底部?

2024-01-25

我正在创建教程屏幕,其中有两个视图:-一个应该位于屏幕中央,另一个应该位于屏幕底部。

但我的两种观点都不正确,请检查下面的图片。 我已经完成了一些代码行来做到这一点,但没有得到正确的解决方案,请检查下面的代码一次

import 'package:flutter/material.dart';
import 'package:page_indicator/page_indicator.dart';

    import 'login_screen.dart';

    class Tutorial extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _TutorialScreen();
      }
    }

    class _TutorialScreen extends State<Tutorial> {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.white,
          child: Align(
            alignment: Alignment.center,
            child:Column(
              children: <Widget>[
                Container(
                  height: 250.0,
                  margin: EdgeInsets.only(left: 10.0,top: 40.0,right: 10.0),
                  child: PageIndicatorContainer(
                    pageView: PageView(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                        ),
                        Container(
                          color: Colors.yellow,
                        ),
                        Container(
                          color: Colors.blueAccent,
                        )
                      ],
                    ),
                    length: 3,
                    align: IndicatorAlign.bottom,
                    indicatorSpace: 5.0,
                    padding: EdgeInsets.all(10.0),
                  ),
                ),
                Container(
                  height: 80.0,
                  color: Colors.purple,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: OutlineButton(
                          onPressed: () {
                            Navigator.of(context)
                                .push(MaterialPageRoute(builder: (context) => LoginScreen()));

                          },
                          textColor: Colors.white,
                          child: Text(
                            "Login",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 10.0),
                        child: RaisedButton(
                          onPressed: () {},
                          color: Colors.black54,
                          child:
                          Text("SignUp", style: TextStyle(color: Colors.white)),
                        ),
                      ),
                    ],
                  ),
                )

              ],

            )

          ),
        );
      }
    }

请检查上面的代码一次并让我知道一次。


使用它来获取所需的视图

Stack(children: <Widget>[
      Align(alignment: Alignment.center,
      child: Container(width: 100, height: 100, color: Colors.redAccent,),),
      Align(alignment: Alignment.bottomCenter,
      child: Container(height: 100, color: Colors.purpleAccent,),)
    ],)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter:-如何将视图放置在屏幕的中心和底部? 的相关文章

随机推荐

  • eval() 可以优化吗?

    eval 更改局部变量的能力给 JavaScript 优化器带来了很大的问题 我读了 javascript权威指南 这本书 eval 可以优化吗 我不明白 这并不是说eval优化 而是那些寻求优化的 JavaScript 引擎被阻止这样做e
  • 对向量的每个元素中的单词重新排序

    我想更改向量中每个元素的词序 具体来说 我想制作另一个向量 其中第一个单词现在是许多长度不同的元素的最后一个单词 Data metadata1 lt c reference1 an organism reference2 another o
  • 如何填写数据安全? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在为我的应用填写 Google Play 数据安全表单 我的应用程序使用 AdMob 并且没有其他收集用户信息的库 我该怎么填写呢 对
  • 双击 .jar 文件时“找不到主类”

    首先 我意识到这个问题应该很简单 而且很多人似乎都经历过 但是 看来我的问题可能是slightly与现有职位不同 我正在使用 NetBeans 编译 Java 应用程序 构建完成后 输出将正确进入 dist 文件夹 jar 文件就在那里 如
  • onSaveInstanceState中保存接口(Listener)

    保存实例状态 对于像 Integer Long String 等数据都可以 我只是将其放入包中 并在再次调用 onCreateView 时将其取回 但我的片段也有像下面这样的听众 public class SomeFragment exte
  • EPPlus 和 ClosedXML 库在使用 OpenXML 方面有何区别? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我试图在 ClosedXML EPPlus 和可能的 SpreadsheetLight 之间进行选择 我可能会出于哪些原因考虑选择其中之一
  • 如何调试大型 git 提交?

    好的 情况如下 几年前 我们对代码库中的多个文件进行了多项更改 并一次性全部提交 这些更改中的某个地方隐藏着一个错误 使用 git bisect 我很快就能够追踪到罪魁祸首的提交 但该提交中的更改量让我有点不那么热情了 使用 git bis
  • rshiny - 有条件的条件面板:检查列表中的项目

    我有 2 个列表 每个列表包含多个 idp id以另一个变量为条件d d1 lt as list unique df p id df d 1 d2 lt as list unique df p id df d 2 我想添加一个conditi
  • ASP.Net 5 project.json 脚本命令的完整列表? (视觉工作室 2015)

    我已经看过了ASP NET 5团队 wiki 条目项目 json 来识别哪个脚本命令可用 目前列出以下内容 scripts prebuild echo before building postbuild echo after buildin
  • 顶层例外

    我在用着topshelf http topshelf project com 当我尝试使用 i 选项安装为服务时 我收到此异常 无法将 Magnum CommandLineParser SwitchElement 类型的对象转换为 Magn
  • 为 athena 选择特定文件

    在 Athena 中创建表时 我无法使用特定文件创建表 有没有办法从给定的存储桶中选择以 year 2019 开头的所有文件 例如 s3 bucketname prefix year 2019 csv 文档对此说得很清楚 这是不允许的 Fr
  • 正则表达式使用 YYYY-MM-DD 格式验证 PHP 中的日期

    我正在尝试制作一个日期正则表达式验证器 我遇到的问题是我正在使用输入字段 date type 这在 Chrome 中就像一个魅力 它会在 Chrome 中打开类似日历的功能 但在其余部分它什么也不做 所以我决定手动输入其余部分的日期 这是我
  • 等待目标设备上线

    我最近更新到 Android Studio 2 3 现在当我尝试运行该应用程序时 模拟器无法上线 300 秒后超时 此外 该应用程序遇到了致命异常错误 OOM 我不确定如何解决该问题 或者这是否是模拟器问题的一部分 任何帮助深表感谢 再说一
  • 如何将数据从一张工作表导入到另一张工作表

    我在 Excel 中有两个不同的工作表 所有第 1 行单元格中的标题都相同 a1 id b1 名称 c1 价格 我的问题是 有没有办法将数据 如名称 从一个工作表导入到另一个工作表中 其中两个工作表中的 id 相同 eg sheet 1 s
  • 如何找到 2 个数字中的最大值(更大、更大)?

    我有两个变量value and run value 9999 run problem getscore 如何找出哪个更大 并获得更大的值 See also Find the greatest largest maximum number i
  • Thread.Sleep 与 Task.Delay?

    我知道Thread Sleep阻塞一个线程 但确实Task Delay还阻止 或者只是像Timer它对所有回调使用一个线程 当不重叠时 this https stackoverflow com questions 15341962 how
  • 如何在 git 服务器端禁用压缩?

    我有一个存储库 从中拉取需要很长时间 因为服务器几乎没有可用 RAM 并且它在交换时进行了大量操作 remote Compressing objects 24 正在发生 即使我在服务器本地克隆 网络没有那么受限 因此发送所有未压缩的数据就可
  • PHP:多维数组中的foreach

    我有一个动态表单来创建创建数组的章节和子章节 var dump POST array textfield gt array 0 gt title one 1 gt title two 2 gt title three 4 gt title
  • SwiftUI - 如何将工具栏添加到 NavigationView 内的 TabView 选项卡?

    我正在尝试添加不同的toolbars 到我的每个选项卡 但它们没有显示 该应用程序主要在横向 iPad 上使用 我可以将工具栏添加到TabView本身并显示 但我不知道如何将按下导航堆栈的按钮传递到要在本地处理的各个视图 视图模型 我尝试过
  • Flutter:-如何将视图放置在屏幕的中心和底部?

    我正在创建教程屏幕 其中有两个视图 一个应该位于屏幕中央 另一个应该位于屏幕底部 但我的两种观点都不正确 请检查下面的图片 我已经完成了一些代码行来做到这一点 但没有得到正确的解决方案 请检查下面的代码一次 import package f