将Flutter小部件定位到屏幕外

Question

作为标题所述，我正在尝试将我的小部件定位在屏幕外。目前，我已经成功地将小部件图像偏移屏幕，但这并不是我期望的结果。屏幕外的图像仍然可见于状态栏中。

这是它的外观。

这是我期望它应该看起来的样子（在Adobe XD中设计）。

Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      backgroundColor: Palette.primaryBackground,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Image.asset(
          'assets/Splash.png',
          fit: BoxFit.scaleDown,
          alignment: new Alignment(1.4, -1.2),
        ),
      ),
    ),
  );
}

我尝试在Stack内使用Positioned小部件，但是当我尝试向Stack的子项添加新小部件时，它会导致更多溢出问题。

我相信有一种适当的方法可以将小部件放置在绝对位置上。谁能帮帮我？

- Dexter Siah

---

发布一张展示你期望的图片。 - Arnold Parge

@ArnoldParge 已添加。 - Dexter Siah

Answer 1

尝试使用 transform: Matrix4.translationValues() 并结合 MediaQueries 进行定位。

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
      backgroundColor: Palette.primaryBackground,
        body: Container(
          child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.scaleDown,
//             alignment: new Alignment(1.4, -1.2),
          ),
          transform: Matrix4.translationValues(
              MediaQuery.of(context).size.width * .8, -50.0, 0.0),
        ),
      ),
    );
  }

- Monasha

---

它返回相同的结果，图像仍然在状态栏上方溢出。 - Dexter Siah

Answer 2

解决方案

我添加了高度为200的sizedBox，将文本推向屏幕中间，以便继续列的子项，否则所有列都将从顶部开始。

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        color: Palette.primaryBackground,
        child: Stack(
          overflow: Overflow.clip,
          children: <Widget>[
            Positioned(
              top: -60,
              right: -80,
              child: Image.asset('assets/Splash.png'),
            ),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  SizedBox(
                    height: 200,
                  ),
                  Text('hello'),
                ],
              ),
            )
          ],
        ),
      ),
    ),
  );
}

- Dexter Siah

Answer 3

你可以使用堆栈并使溢出可见：

 Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    //using Positioned to control position
  ],
)

- Sang CHÂU VĂN

---

将溢出值更改为Overflow.clip可以解决问题，但是如果我在列中添加另一个小部件（与Stack相同级别），它会产生A RenderFlex overflowed by Infinity pixels on the bottom.的错误。有任何想法吗？ - Dexter Siah