flutter 如何使列项在它们的边框上有相当多的重叠

iyzzxitl  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(186)

我有以下代码

Column(
  children: [
    Container(
      width: 200,
      height: 300,
      decoration: const BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
    ),
    Container(
      width: 150,
      height: 200,
      decoration: const BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.all(Radius.circular(15.0)),
      ),
    ),
    Container(
      width: 100,
      height: 150,
      decoration: const BoxDecoration(
          color: Colors.green,
          borderRadius:BorderRadius.all(Radius.circular(15.0)),
      ),
    ),
  ],
)

UI中的输出正常。但我试图使设计像以下

我尝试使用Stack,但问题是堆栈不适合我的情况,因为项目大小不固定,所以会有问题。在我前面的例子中的heightwidth只是作为例子,但事实上,值取决于列处理此自动的项目内容

nqwrtyyt

nqwrtyyt1#

你可以使用Stack与Positioned widget来实现这个ui,下面你可以检查代码.

import 'package:flutter/material.dart';
    
    class ExamplePage extends StatefulWidget {
      const ExamplePage({Key? key}) : super(key: key);
    
      @override
      State<ExamplePage> createState() => _ExamplePageState();
    }
    
    class _ExamplePageState extends State<ExamplePage> {
      @override
      Widget build(BuildContext context) {
        var mq = MediaQuery.of(context).size;
        return Scaffold(
          body: SafeArea(
            child: Stack(
              clipBehavior: Clip.none,
              children: [
                customContainer(
                  width: mq.width * 0.80,
                  height: mq.height * 0.25,
                  color: Colors.red,
                ),
                Positioned(
                  bottom: -130,
                  child: customContainer(
                    width: mq.width * 0.72,
                    height: mq.height * 0.21,
                    color: Colors.blue,
                  ),
                ),
                Positioned(
                  bottom: -210,
                  child: customContainer(
                    width: mq.width * 0.65,
                    height: mq.height * 0.17,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        );
      }
    
      Widget customContainer({
        required double height,
        required double width,
        required Color color,
      }) {
        return Container(
          width: width,
          height: height,
          decoration: BoxDecoration(
            color: color,
            borderRadius: const BorderRadius.all(Radius.circular(20.0)),
          ),
        );
      }
    }

输出:

相关问题