flutter 如何淡出底部时，一个wiget溢出约束框？

dkqlctbz 于 2023-01-14 发布在 Flutter

关注(0)|答案(1)|浏览(146)

我写了一个卡片列表，并限制了它的最大高度。我希望卡片底部褪色时，其高度超过限制，褪色是不显示时，限制没有超过。
以下是我想要的效果

我的代码

Widget _buildBody(BuildContext context) {
return CustomScrollView(
  slivers: [
    SliverList(
        delegate: SliverChildBuilderDelegate(
      (context, index) {
        return ConstrainedBox(
          constraints: const BoxConstraints(maxHeight: 200),
          child: Wrap(
            children: [
              const Card(
                child: ListTile(
                  title: Text('test title'),
                  subtitle: Text(
                      'test \n test \n test test test test test test test test test testtest test test test test test test test '),
                ),
              ),
            ],
          ),
        );
      },
      childCount: 10,
    ))
  ],
);

flutter

来源：https://stackoverflow.com/questions/75058185/how-to-fade-out-bottom-when-a-wiget-overflow-constrainedbox

1条答案

按热度按时间

pbpqsu0x1#

我认为您的意思是限制每张卡的高度：
使用ShaderMask可以实现以下效果：

CustomScrollView(
        slivers: [
          SliverList(
              delegate: SliverChildBuilderDelegate(
            (context, index) {
              return Wrap(
                children: [
                  ConstrainedBox(
                    constraints:
                        const BoxConstraints(maxHeight: 200),
                    child: Card(
                      color: Colors.white,
                      child: ListTile(
                        title: Text('test title',),
                        subtitle: ShaderMask(
                          shaderCallback: (bounds) => LinearGradient(
                            begin: Alignment.center,
                            end: Alignment.bottomCenter,
                            colors: [Colors.white, Colors.transparent],
                          ).createShader(bounds),
                          child: Text('test \n test \n test test test test test test test test test testtest test test test test test test test test test test test test test test test test test testtest test test test test test test test ',),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
            childCount: 10,
          ))
        ],
      ),

赞(0）回复(0）举报 2023-01-14

我来回答

flutter 如何淡出底部时，一个wiget溢出约束框？

1条答案

相关问题

热门标签

最新问答