Почему мой расширенный контейнер не занимает оставшуюся высоту моего устройства? - PullRequest
Новая
       10

Почему мой расширенный контейнер не занимает оставшуюся высоту моего устройства?

0 голосов
/ 03 августа 2020

Я следую этому руководству и столкнулся с проблемой. У меня есть основной контейнер, а внутри основного контейнера есть столбец. Внутри столбца находятся различные элементы, а в конце - расширенный контейнер, создающий эффект перекрытия. Однако проблема в том, что расширенный контейнер не закрывает оставшуюся часть высоты устройства и оставляет пространство ближе к концу, показывающее фон родительского контейнера. Я новичок в флаттере, поэтому сейчас изучаю синтаксис. Я пробовал удвоить высоту расширенного контейнера, но это не сработало. Как это исправить?

изображение, показывающее, как расширенный контейнер отображается на экране 

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 30.0),
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            colors: [
              Colors.blue[900],
              Colors.blue[500],
              Colors.blue[400],
            ],
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 40.0),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Eazy",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    "Bank",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(60),
                    topRight: Radius.circular(60),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

1 Ответ

1 голос
/ 03 августа 2020

Проблема с padding: EdgeInsets.symmetric(vertical: 30.0), padding принимает значение 30.0 logical pixels для обоих вертикальных направлений (вверх и вниз).

Вы можете исправить это, используя padding: EdgeInsets.only(top: 30.0), который дает заполнение только для top контейнера.

Я добавил демонстрацию, используя ваше дерево виджетов в качестве примера: 

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(top: 30.0), // new line
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            colors: [
              Colors.blue[900],
              Colors.blue[500],
              Colors.blue[400],
            ],
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 40.0),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Eazy",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                  Text(
                    "Bank",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 40.0,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(60),
                    topRight: Radius.circular(60),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
...