flutter - 如何从覆盖另一个的小部件中删除透明度？

Question

我正在尝试创建一个覆盖 ListView 的可扩展小部件。但是，这个小部件是透明的，我不想看到它下面的 ListView 部分。

上图是问题的演示。

这是问题代码

class _TestWidgetState extends State<TestWidget> {
  final lvController = ScrollController();
  ExpandableController exController = ExpandableController();
  @override
  void initState() {
    //  controller = new ExpandableController(initialExpanded: true);

    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  void listenScrolling() {
    if (lvController.position.atEdge) {
      final isTop = lvController.position.pixels < 50;

      if (isTop) {
        print("scrolled to top");
        setState(() {
          exController.toggle();
        });
      }
    } else if (lvController.position.userScrollDirection ==
            ScrollDirection.reverse &&
        exController.expanded) {
      setState(() {
        exController.toggle();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return new SafeArea(
        child: ExpandableNotifier(
            initialExpanded: true,
            child: Container(
                color: Theme.of(context).backgroundColor,
                child: Scaffold(
                    appBar: sappBar(context),
                    body: Column(children: [
                      Expanded(
                          child: Stack(fit: StackFit.expand, children: [
                        Positioned(
                            top: 0,
                            width: MediaQuery.of(context).size.width,
                            child: Container(
                                height: 100,
                                width: MediaQuery.of(context).size.width,
                                color: Colors.white,
                                child: Expandable(
                                  collapsed: Container(),
                                  expanded: testCard(),
                                ))),
                        buildList()
                      ]))
                    ])))));
  }

  Widget testCard() {
    return Container(
        height: 100,
        width: MediaQuery.of(context).size.width,
        child: Card(
          child: Text(
              "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium."),
          color: Colors.white,
        ));
  }

  Widget buildList() => ListView.builder(
      shrinkWrap: true,
      controller: lvController,
      itemCount: 50,
      itemBuilder: (context, index) => ListTile(
              title: Center(
            child: Text('${index + 1}', style: TextStyle(fontSize: 32)),
          )));
  PreferredSizeWidget sappBar(BuildContext context) {
    return AppBar(backgroundColor: Theme.of(context).backgroundColor, actions: [
      Builder(builder: (context) {
        exController = ExpandableController.of(context, required: true)!;
        lvController.addListener(listenScrolling);
        return IconButton(
            icon: Icon(CupertinoIcons.rectangle_compress_vertical),
            onPressed: () {
              setState(() {
                exController.toggle();
              });
            });
      }),
    ]);
  }
}

这是该项目的链接

标签： flutter

Answer 1

您可以将该buildList()方法放在小部件内，并使用该功能Stack从其中删除颜色。ContainertestCard()

Container(
  color: Theme.of(context).backgroundColor,
  child: Scaffold(
    appBar: sappBar(context),
    body: Stack(
      fit: StackFit.expand,
      children: [
        buildList(),
        Positioned(
          top: 0,
          width: MediaQuery.of(context).size.width,
          child: Container(
            height: 100,
            child: Expandable(
              collapsed: Container(),
              expanded: testCard(),
            ),
          ),
        ),
      ],
    ),
  ),
),

结果：