Question

我有一个堆栈小部件，其位置是这样的位置小部件：

Stack(
        overflow: Overflow.visible,
        children: [
          Container(
            width: 150,
            height: 150,
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: -26,
          ),
        ],
      ),

晶圆厂位于容器外部的那部分不可点击，解决方案是什么？这是屏幕截图：

Answer 1

尝试：

      Stack(
        overflow: Overflow.visible,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>
            [
              Container(width: 150, height: 150, color: Colors.yellow),
              Container(width: 150, height: 28, color: Colors.transparent),
            ],
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: 0,
          ),
        ],
      )

如果希望按钮保持可点击状态，则应将其保留在堆栈中

Answer 2

Container(
        width: 150,
        height: 180,
        child: Stack(
          children: [
            Container(
                width: double.infinity,
                height: 150,
               child: Image.asset('assets/images/image.jpg', fit: BoxFit.cover,)
            ),
            Container(
              alignment: Alignment.bottomCenter,
              child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print('FAB tapped!');
                },
                backgroundColor: Colors.blueGrey,
              ),
            ),
          ],
        ),
      ),

Fab按钮不可单击，因为按给定的-ve bottom，它会在堆栈外部进行渲染。理想情况下，您应该具有父容器，而在其内部应具有应渲染的所有堆栈小部件。在这里，我使用了硬编码的值，但是您应该根据需要使用媒体查询

赞：

Container(
        width: MediaQuery.of(context).size.width * 0.3,
        height: MediaQuery.of(context).size.height * 0.3,
        child: Stack(
          children: [
            Container(
                width: double.infinity,
                height: MediaQuery.of(context).size.height * 0.26,
               child: Image.asset('assets/images/jitesh.jpg', fit: BoxFit.cover,)
            ),
            Container(
              alignment: Alignment.bottomCenter,
              child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print('FAB tapped!');
                },
                backgroundColor: Colors.blueGrey,
              ),
            ),
          ],
        ),
      ),

颤振溢出定位的按钮不可单击

2 个答案: