具有透明背景的 Flutter PageView

Question

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

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

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

PageView::build

@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 小部件透明？

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

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

具有透明背景的 Flutter PageView

Flutter PageView with transparent background

flutter

flutter-pageview

PageView::build