Stack布局中， Positioned包裹的控件如果占满屏幕(水平占满或垂直占满)

来源：11-3 Flutter Android混合开发实战-集成与调用【Android技术与Flutter融合】

_呵呵哒_

2019-06-11

如题，这是一段代码，想让positon包裹的控件在底部，可是包裹的控件水平方向上只有自身的宽度，无奈，老师求解答，谢谢 !!! 图片描述

Stack(
      children: <Widget>[
        Image.asset(
          'images/control_bg.png',
          fit: BoxFit.cover,
        ),
        Padding(
          padding:
              EdgeInsets.only(top: MediaQuery.of(context).padding.top + 12.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Text(
              '控制台',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
        Positioned(
          bottom: 0.0,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8.0),
                border: Border.fromBorderSide(BorderSide(color: Colors.grey))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[Text('即将到期'), Text('_')],
            ),
          ),
        )
      ],
    )

写回答

1回答

CrazyCodeBoy

2019-06-11

帮你改了下，可以看下是不是你所需要的效果：

Stack(
      children: <Widget>[
        Image.asset(
          'images/control_bg.png',
          fit: BoxFit.cover,
        ),
        Padding(
          padding:
              EdgeInsets.only(top: MediaQuery.of(context).padding.top + 12.0),
          child: Align(
            alignment: Alignment.topCenter,
            child: Text(
              '控制台',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
        Positioned(
  bottom: 0.0,
  left: 0,
  right: 0,
  child: Container(
    decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(8.0),
        border: Border.fromBorderSide(
            BorderSide(color: Colors.grey))),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[Text('即将到期'), Text('_')],
    ),
  ),
)
      ],
    )

Flutter从入门到进阶实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势，，系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程

相似问题

关于MainAxisSize.min和CrossAxisAlignment.center

回答 1

关于屏幕适配？

回答 1

一个受屏幕影响的布局问题

回答 1

多行文本输入框, 内容如何垂直居中?

回答 1

请问老师stack 中还能放置一个stack吗？

回答 1

打开慕课网App查看更多内容