flutter层叠布局

学习flutter的第二天,记录学习的美好时光,学习到什么不重要,重要的是一直在学习的路上.


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

  @override
  Widget build(BuildContext context) {
    final size=MediaQuery.of(context).size;
    return Stack(
      children: [
        ListView(
          padding: EdgeInsets.only(top: 45),
          children: const [
            ListTile(
              title: Text("这是标题1"),
            ),
            ListTile(
              title: Text("这是标题2"),
            ),
            ListTile(
              title: Text("这是标题3"),
            ),
            ListTile(
              title: Text("这是标题4"),
            ),
            ListTile(
              title: Text("这是标题5"),
            ),
            ListTile(
              title: Text("这是标题1"),
            ),
            ListTile(
              title: Text("这是标题2"),
            ),
            ListTile(
              title: Text("这是标题3"),
            ),
            ListTile(
              title: Text("这是标题4"),
            ),
            ListTile(
              title: Text("这是标题5"),
            ),
            ListTile(
              title: Text("这是标题1"),
            ),
            ListTile(
              title: Text("这是标题2"),
            ),
            ListTile(
              title: Text("这是标题3"),
            ),
            ListTile(
              title: Text("这是标题4"),
            ),
            ListTile(
              title: Text("这是标题5"),
            ),
          ],
        ),
        Positioned(
             top: 0,
            left: 0,
            height: 40,
            width:size.width,
            child: Container(
              alignment: Alignment.center,
              color: Colors.black,
              child: const Text(
                "您好",
                style: TextStyle(color: Colors.white),
              ),
            ))
      ],
    );
  }
}

最终页面


68a753a8016d668892130d753f27a263.jpg

你可能感兴趣的:(flutter层叠布局)