如何在 Flutter 溢出的水平列表中将小部件定位在其容器外？

Question

这是想要的结果。

我尝试过的：

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,
              );
            }
          },
        ),
      ),

这是没有水平滚动（少于 7 项）的样子。 这就是水平滚动的样子。

如何在其他小部件前面时将文本定位在堆栈外？

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,
              ),
            ),
          ],
        ),
      ),
    );