Flutter里stack的相关使用

主要是图片的堆栈使用,使用alignment和positioned
(一)效果图
Flutter里stack的相关使用_第1张图片
(二)实现代码:

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: [
        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,),
        //  ),
      ],
    ),
  ));
}

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

你可能感兴趣的:(Flutter)