flutter - 如何在 Flutter 溢出的水平列表中将小部件放置在其容器外部？

Question

这是 desired result .

我尝试过的:

Container(
        height: 60,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: 7,
          separatorBuilder: (context, index) => SizedBox(
            width: 5,
          ),
          itemBuilder: (context, index) {
            if (index == 0) {
              return Stack(
                clipBehavior: Clip.none,
                children: [
                  Container(
                    width: 60,
                    color: Colors.blueAccent,
                  ),
                  Positioned(
                    left: 25,
                    bottom: -25,
                    child: Container(
                      child: Text(
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                      ),
                      color: Colors.amberAccent,
                      height: 30,
                    ),
                  ),
                ],
              );
            } else {
              return Container(
                width: 60,
                color: Colors.blueAccent,
              );
            }
          },
        ),
      ),

这是 no horizontal scroll 的样子(少于 7 项)。这是它的样子with horizontal scroll .

如何将文本放置在堆栈之外，同时位于其他小部件前面？

Answer 1

我希望这对你有用。

确保 Stack 的溢出属性 = Overflow.visible，否则容器的溢出部分会被剪掉。

height of child component=60
height of tooltip=20
positioned at bottom 0 placing it at bottom of the parent. Be careful with the sizes.

       return SizedBox(
      height: 70,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Stack(
          overflow: Overflow.visible,
          children: [
            Row(
              children: [
                //build your children here..
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
                Container(
                  margin: EdgeInsets.only(left: 12),
                  width: 60,
                  height: 60,
                  color: Colors.blueAccent,
                ),
              ],
            ),
            //build the tooltip here.
            Positioned(
              left: 25,
              bottom: 0,
              child: Container(
                child: Text(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                ),
                color: Colors.amberAccent,
                height: 20,
              ),
            ),
          ],
        ),
      ),
    );