flutter 中堆栈小部件中的溢出属性

Question

我想要溢出按钮在容器堆栈中可见。

所需设计：

我的输出：

class TransactionHistory extends StatelessWidget {
  const TransactionHistory({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(25.0).copyWith(top: 8, bottom: 15),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Container(
          decoration: const BoxDecoration(color: Colors.transparent),
          child: const Stack(
            // overflow :Overflow.visible
            clipBehavior: Clip.none,
            alignment: Alignment.bottomCenter,
            fit: StackFit.passthrough,
            // alignment: Positioned(child: ),
            children: [
              TransactionTileContainer(),
              // SeeAllButton(),
              Positioned(bottom: -30, right: 110, child: SeeAllButton())
            ],
          ),
        ),
      ),
    );
  }
}

如何让按钮溢出

Answer 1

尝试下面的源代码。

return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Stack(
            children: [
              Container(
                margin: const EdgeInsets.symmetric(horizontal: 20),
                child: Column(
                  children: [
                    transactionTileContainer(),
                    Container(height: 10,),
                    amexCadView()
                  ],
                ),
              ),
              Positioned(bottom: 180, left:0, right: 0,  child: seeAllButton()),
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

在这里，您需要记住，在“位置”小部件中，底部值应约为您的美国运通卡小部件的高度。

结果：