将 Flutter 小部件定位到屏幕外答案

【问题标题】：Positioning Flutter widgets off screen将 Flutter 小部件定位到屏幕外
【发布时间】：2020-05-16 13:44:53
【问题描述】：

正如标题所述，我正在尝试将我的小部件放置在屏幕之外。目前我已经设法将小部件图像从屏幕上偏移，但这不是我所期望的结果。屏幕外的图像在状态栏上仍然可见。

原来是这样的

这就是我期望的样子（在 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 的孩子时，它会导致更多的溢出问题。

我确信有一种适当的方法可以将小部件放置在绝对位置。任何人都可以帮助我吗？

【问题讨论】：

发布一张显示您期望的图片。
@ArnoldParge 添加

标签： flutter

【解决方案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),
        ),
      ),
    );
  }

【讨论】：

返回相同的结果，图片仍然溢出状态栏上方。

【解决方案2】：

解决方案

如果不是所有列都从顶部开始，我添加了高度为 200 的 sizedBox 以将文本向下推到屏幕中间以继续 Column 的子项。

@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'),
                ],
              ),
            )
          ],
        ),
      ),
    ),
  );
}

【讨论】：

【解决方案3】：

您可以使用可见溢出的堆栈：

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

【讨论】：

将溢出值更改为 Overflow.clip 有效，但是，如果我在列中添加另一个小部件（与 Stack 相同），它会给我一个错误 A RenderFlex overflowed by Infinity pixels on the bottom. 。任何想法为什么？