Question

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

但是我的两种观点都不正确，请检查以下图像。我已经完成了一些代码行，但是没有得到正确的解决方案，请检查一下下面的代码

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)),
                        ),
                      ),
                    ],
                  ),
                )

              ],

            )

          ),
        );
      }
    }

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

Answer 1

使用它来获取所需的视图

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,),)
    ],)

Answer 2

将底部的Container放在Align小部件中，然后使用alignment: Alignment.bottomCenter。：

                Align(
                  alignment: Alignment.bottomCenter,
                    child: Container(
                    height: 80.0,
                    color: Colors.purple,
                    child: Row(

                    ... .... ... // other code

Answer 3

感谢 @Zulfiqar ，但是不必将整个视图放在 Stack 小部件中并使用 Align < / strong>属性。我们还可以使用 Expanded 或 flexible 小部件来解决问题。
我们也可以像下面一样使用 MediaQuery

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:page_indicator/page_indicator.dart'; class HomeScreen extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return _HomeScreen(); } } class _HomeScreen extends State<HomeScreen> { @override void initState() { // TODO: implement initState super.initState(); } @override Widget build(BuildContext context) { // TODO: implement build return Material( child:Align( alignment: Alignment.center, child:Column( children: <Widget>[ Container( height: MediaQuery.of(context).size.height*0.90, /////HERE I USED MEDIAQUERY FOR IT child: PageIndicatorContainer( child: 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: MediaQuery.of(context).size.height*0.10, ////HERE I USED MEDIAQUERY FOR IT color: Colors.purple, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( child: OutlineButton( onPressed: () { }, 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)), ), ), ], ), ) ], ) ), ); } }

对于pageView，我使用了这个库 page_indicator：^ 0.3.0

上述代码的输出如下

如何将视图放置在屏幕的中央和底部？

3 个答案: