Flutter里stack的相关使用

最新推荐文章于 2024-05-12 22:23:48 发布

清风99w

最新推荐文章于 2024-05-12 22:23:48 发布

阅读量290

点赞数 2

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_45425105/article/details/111043686

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

主要是图片的堆栈使用，使用alignment和positioned
（一）效果图
在这里插入图片描述
（二）实现代码：

import 'package:flutter/material.dart';

class PageStack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("甜宠软妹"),
        centerTitle: true,
      ),
      body: LayoutDemo(),
    );
  }
}
Widget LayoutDemo() {
  return Center(
      child: Container(
    width: 400,
    height: 300,
    color: Colors.yellow,
    child: Stack(
      children: <Widget>[
        Positioned(
            left: 10,
            top: 10,
            child: Icon(
              Icons.home,
              size: 40,
              color: Colors.red,
            )),
        Positioned(
            right: 10,
            top: 10,
            child: Icon(
              Icons.home,
              size: 40,
              color: Colors.red,
            )),
//第二种方式
        //  Align(alignment: Alignment.topLeft,
        //  child: Icon(Icons.home,size: 40,color: Colors.white,),
        //  ),
        //  Align(alignment: Alignment.topRight,
        //  child: Icon(Icons.home,size: 40,color: Colors.red,),
        //  ),
      ],
    ),
  ));
}

（三）应用场景
层叠图片
这里面的图标可以换成图片等