Question

我正在尝试实现UI设计，如下所示：

那是我到目前为止所取得的成就：

我陷入了用盒子填充屏幕的阶段，我试图以多种方式（扩展，容器等）来实现这一点，但结果令我不满意。我该如何实现？

还有另一个问题，当我创建抽屉时，它可以工作（我可以向右滚动屏幕，并出现抽屉导航屏幕），但是我看不到抽屉图标。

顺便说一句，如果您有改进代码或我可以写得更好的建议，我会很高兴听到

我的代码：

 class Sample extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
      drawer: Drawer(),
body: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Container(
                    height: MediaQuery.of(context).size.height / 2,
                    width: double.infinity,
                    color: Color.fromRGBO(50, 50, 205, 1),
                  ),
                  Opacity(
                    child: Image.network(
                      'https://cdn.pixabay.com/photo/2015/04/23/21/36/auto-736794__340.jpg',
                      //half of the screen
                      height: MediaQuery.of(context).size.height / 2,
                      fit: BoxFit.cover,
                    ),
                    opacity: 0.3,
                  ),
                  SafeArea(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(bottom: 58.0),
                          child: Text(
                            'Parking App',
                            style: TextStyle(color: Colors.white, fontSize: 20.0),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

            ],
          ),
        );
      }
    }

Answer 1

您可以使用堆栈实现类似的布局。我演示如下。

注意：请确保您使用的是全屏显示的内容，否则将出现黑屏。

const input = {
  closingTime: 'closing',
  contactEmail: 'Email',
  contactPhone: 'Phone',
  openingTime: 'Time',
  priceFrom: 'From',
  priceTo: 'To'
}

const { closingTime, contactEmail, ...result } = input

console.log(result)

Answer 2

也许有更好的方法可以实现这一点，但这是行和列的解决方案：

import 'package:flutter/material.dart';

class SamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Column(
        children: <Widget>[
          Image.network(
            "http://i63.tinypic.com/16p2xu.jpg",
            fit: BoxFit.cover,
            height: screenHeight / 2,
          ),
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(Icons.account_balance),
                            SizedBox(height: 10),
                            Text("My Stats"),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Container(
                          color: Colors.indigo,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              Icon(Icons.accessibility, color: Colors.white),
                              SizedBox(height: 10),
                              Center(
                                child: Text(
                                  "Component",
                                  style: TextStyle(color: Colors.white),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.cyanAccent,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.access_alarm),
                        SizedBox(height: 20),
                        Text("Workout"),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

结果：

如何实现充满屏幕的盒子，我看不到抽屉

2 个答案: