Question

朋友，我需要像这样开发屏幕

但是在下面的视图中，我尝试了扩展，但有所不同，请帮助朋友，我是新手，我不知道如何实现所需的布局

下面是我的代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'ColorsPage.dart';

void main() => runApp(new Login());

class Login extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    Login_State login_state() => Login_State();
    return login_state();
  }
}

class Login_State extends State<Login>{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Builder(builder: (BuildContext context){
          return new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Container(
                  child: new Image.asset('assets/rural_post_logo.png'),
                decoration: new BoxDecoration(
                  color: Colors.white
                ),
                alignment: Alignment(0.0, -1.0),
              ),
              new Container(
                child: new Text('SIGN IN',style: new TextStyle(
                  color: Colors.white
                ),),
                decoration: new BoxDecoration(
                  color: secondarycolor
                ),
                alignment: Alignment(0.0, -1.0),
              ),
              new Container(
                child: new Text('SIGN UP',style: new TextStyle(
                  color: Colors.white
                ),),
                decoration: new BoxDecoration(
                  color: primarycolor
                ),
                alignment: Alignment(0.0, -1.0),
              )

            ],
          );
        }),
      ),
    );
  }
}

Answer 1

Column上的Container小部件将其正常行为覆盖得尽可能大，现在它只包装了您注意到的内容。您可以将Container的高度设为property或将其包裹在Padding中：

Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
    Padding(
        padding: const EdgeInsets.all(70.0),
        child: 
          new Container(
              child: new Image.asset('assets/rural_post_logo.png'),
            decoration: new BoxDecoration(
              color: Colors.white
            ),
            alignment: Alignment(0.0, -1.0),
          ),
    ),
    new Column(
        children: <Widget>[
        new Container(
            child: Padding(
            padding: const EdgeInsets.all(80.0),
            child: new Text(
                'SIGN IN',
                style: new TextStyle(color: Colors.white),
            ),
            ),
            decoration: new BoxDecoration(color: secondarycolor),
            alignment: Alignment(0.0, -1.0),
        ),
        new Container(
            child: Padding(
            padding: const EdgeInsets.all(80.0),
            child: new Text(
                'SIGN UP',
                style: new TextStyle(color: Colors.white),
            ),
            ),
            decoration: new BoxDecoration(color: primarycolor),
            alignment: Alignment(0.0, -1.0),
        )
        ],
    ),
    ],
),

如何在复杂的屏幕上空间给图像或文本背景

1 个答案: