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

我尝试在Positioned中使用Stack小部件，但是当我尝试向Stack的孩子添加新的小部件时，这引起了更多的溢出问题。

我确定有一种将小部件放在绝对位置的正确方法。有人可以帮助我吗？

Answer 1

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

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

Answer 2

尝试使用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),
        ),
      ),
    );
  }

Answer 3

解决方案

我添加了一个高度为200的sizeBox，以将文本下移到屏幕中间，以使该列的子级继续，如果不是所有的列都将从顶部开始。

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

将Flutter小部件置于屏幕外

3 个答案: