flutter: верхняя часть изображения удалена в виджете стека

Question

Я пытаюсь использовать стек в своем дереве виджетов:

  body: Center(
    child: SingleChildScrollView(
      child: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Container(
            // card view
            alignment: Alignment.center,
            height: 200,
            margin: EdgeInsets.only(
                top: 20.0, bottom: 50.0, left: 50.0, right: 50.0),
            decoration: BoxDecoration(
              color: color_transparent_black,
              borderRadius: BorderRadius.circular(14.0),
            ),
          ),
          Positioned(
            top: -60,
            left: 0,
            right: 0,
            bottom: 0,
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: width * 0.3,
                height: height * 0.2,
                child: CircleAvatar(
                  backgroundColor: Colors.transparent,
                  child: Image.asset("assets/images/ic_setting.png"),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

И вот результат:

Почему удален значок верхней части настройки?

Answer 1

Я исправил проблему:

 body: Center(
    child: SingleChildScrollView(
      child: Stack(
        // overflow: Overflow.visible,
        children: <Widget>[
          Container(
            // card view
            alignment: Alignment.center,
            height: 200,
            margin: EdgeInsets.only(
                top: 80.0, bottom: 50.0, left: 50.0, right: 50.0),
            decoration: BoxDecoration(
              color: color_transparent_black,
              borderRadius: BorderRadius.circular(14.0),
            ),

          ),
          FractionalTranslation(
            translation: Offset(0.0, 0.0),
            child: Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: width * 0.3,
                height: height * 0.2,
                child: CircleAvatar(
                  backgroundColor: Colors.transparent,
                  child: Image.asset("assets/images/ic_setting.png"),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

и это результат:

I увеличивается Верхнее поле на top: 80.0 и замените Positioned на FractionalTranslation . На самом деле он работает и с Positioned .

Answer 2

Скорее всего, потому что вы установили top: -60 для виджета Positioned.

Редактировать 1:

Остановить обрезку, удалив SingleChildScrollView

И вы можете центрировать всех дочерних элементов Stack, используя свойство alignment: Alignment.topCenter для Stack сам виджет.

 child: Center(
     child: Stack(
         overflow: Overflow.visible,
         alignment: Alignment.topCenter,
         children: <Widget>[
              Container(
                   height: 200,
                              ...
              ),
              Positioned(
                   top: -60,
                   ...
                   child: Container(
                               ...
                   ),
              ),
      ),
 ]),