Stack 将各个组件重叠在一起

最新推荐文章于 2024-12-22 21:15:00 发布

原创最新推荐文章于 2024-12-22 21:15:00 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

flutter 专栏收录该内容

220 篇文章

订阅专栏

本文探讨了如何利用Stack widget和Positioned组件结合，实现页面元素的重叠和浮动效果，在前端开发中展示了一种创新布局技巧。

Stack 将各个组件重叠在一起,和Positioned合在一起，也可以实现浮动效果。


class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 300,
        width: 300,
        color: Color(0xFF009000),
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Container(
              width: 200,
              height: 100,
              color: Color(0xFFFF9000),
            ),
            Positioned(
              bottom: 15,
              left: 15,
              child: Text(
                "data",
                style: TextStyle(color: Colors.white, fontSize: 32),
              ),
            ),
            Positioned(
              bottom: -15,
              right: -15,
              child: Container(
                width: 100,
                height: 50,
                color: Color(0xffFF90ff),
              ),
            ),
          ],
        ),
      ),
    );
  }
}