具有透明背景的 Flutter PageView答案

【问题标题】：Flutter PageView with transparent background具有透明背景的 Flutter PageView
【发布时间】：2021-08-21 13:13:30
【问题描述】：

我正在尝试使用 PageView 小部件。我将PageView 放在了Column 中，这样它只能占用屏幕高度的50%。

现在的问题是我在PageView 下有一个页面的图像背景，我需要它具有透明背景，以便用户可以在PageView 下看到图像背景。

我尝试将孩子的背景设置为Colors.transparent，但它不起作用，因为容器本身不透明。

PageView::构建

@override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: pageController,
      itemBuilder: (context, index) {
        return Container(
            color: Colors.transparent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                TrackAvatar(imageUrl: _list[index].url),
                Text(_list[index].name),
              ],
            ));
      },
      itemCount: 5,
    );
  }

如何使PageView 小部件透明？

【问题讨论】：

您可以尝试使用 Opacity (api.flutter.dev/flutter/widgets/Opacity-class.html)。它具有您需要的 2 个属性：不透明度和子级。 opacity 可以在 0.0 和 1.0 之间变化。 Child 将成为您的 PageView。像这样的东西：Opacity(opacity: 0.5, child: PageView.builder(...),)
也许这个答案可以帮助你。 stackoverflow.com/a/56963124/9458753

标签： flutter flutter-pageview

【解决方案1】：

PageView 支持透明背景，不需要任何解决方法。

问题是我在Scaffold 中使用了PageView，背景颜色设置为白色。

将脚手架背景改为透明即可解决问题。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: PageView.builder(
        controller: pageController,
        itemBuilder: (context, index) {
          return Container(
              color: Colors.transparent,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  TrackAvatar(imageUrl: _list[index].url),
                  Text(_list[index].name),
                ],
              ));
        },
        itemCount: 5,
      )
    );
  }

感谢那些试图提供帮助的人

【讨论】：