如何在颤动中在容器屏幕上运行小部件

Question

我想在屏幕上显示一些小部件 onTap() 事件，如下图image。

这是我的代码 在此构建方法是返回Container()。 Container 有一个名为SingleChildScrollView 的孩子，并且它还有一些孩子。

所以我不想在创建新小部件时更改所有子级。

简单地说，在运行的屏幕上看到小部件onTap() 而不会打扰另一个小部件。

class _SettingScreenState extends State<SettingScreen> {

  List<Widget> _iconList=[];
  List<Widget> _titleList=[];
  List<Widget> _settingLIst=[];


  @override
  void initState() {
    super.initState();
    for(int i=0;i<5;i++){
      _iconList.add(_addInIcon(i));
    }
    for(int i=0;i<5;i++){
      _titleList.add(_addInTitle(i));
    }
    for(int i=0;i<24;i++){
      _settingLIst.add(_addInSetting(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white
      ),
      child: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _titleList[0],
            _addInSetting(0),
            _addInSetting(1),
            _titleList[1],
            _settingLIst[2],
            _settingLIst[3],
            _titleList[2],
            _settingLIst[4],
            _settingLIst[5],
            _settingLIst[6],
            _settingLIst[7],
            _settingLIst[8],
            _settingLIst[9],
            GestureDetector(
            onTap: (){
              //open widget over the this screen
            },
            child: Button(
              image: _coverImage(),
              width: double.infinity,
              height: 50,
              alignment: Alignment.center,
              fit: BoxFit.fitHeight,
            ),
          ),
          ],
        ),
      ),
    );
  }
}

Ans，在创建新的小部件时是否需要 setState() 来覆盖之前的 Container() 小部件？ 因为我们不能改变以前的Container()

在Android-java开发中，我做了什么

onClick()
    {
        ImageView imageView = new ImageView(this);
        Glide.with(getApplicationContext()).load(position).into(imageView);

        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams( Math.round((float) 35 * density),  Math.round((float) 35 * density));
        imageView.setX(reactionButton.getX());
        imageView.setY(reactionButton.getY());
        imageView.setLayoutParams(layoutParams);
        messageRelativeLayout.addView(imageView);
        imageView.bringToFront();
        animateReaction(imageView);
    }

这意味着每次新的 ImageView 都会添加到树上，无论之前的 ImageView 是否出现。 简单的单击按钮并创建新的 ImageView 并显示在屏幕前面。

这个功能我想在flutter中应用

Answer 1

OverlayWidget 之子

class OverlayChild extends StatefulWidget {
  final Function clearCallBack;
  final double maxWidth;
  final double maxHeight;
  final int itemIndex;

  const OverlayChild({
    Key? key,
    required this.clearCallBack,
    required this.maxWidth,
    required this.maxHeight,
    required this.itemIndex,
  }) : super(key: key);

  @override
  _OverlayChildState createState() => _OverlayChildState();
}

class _OverlayChildState extends State<OverlayChild> {
  late Timer timer;
  final Random random = Random();

  @override
  void initState() {
    super.initState();
    print("int  ${widget.itemIndex}");
    timer = Timer.periodic(Duration(seconds: 5), (timer) {
      setState(() {
        widget.clearCallBack(widget.itemIndex);
        timer.cancel();
        print("after delay");
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Positioned(
      top: random.nextDouble() * widget.maxHeight,
      left: random.nextDouble() * widget.maxWidth,
      child: Container(
        height: 20,
        width: 20,
        padding: EdgeInsets.all(3),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color:
              widget.itemIndex.isEven ? Colors.deepPurple : Colors.cyanAccent,
        ),
        child: Center(child: Text("${widget.itemIndex}")),
      ),
    );
  }
}

主小部件

class HomeOverLay extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomeOverLay> {
  List<OverlayChild> overlayItems = [];

  int itemId = 0;
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () async {
            setState(() {
              overlayItems.add(
                OverlayChild(
                  key: UniqueKey(),
                  clearCallBack: (id) {
                    setState(() {
                      overlayItems
                          .removeWhere((element) => element.itemIndex == id);
                    });
                  },
                  itemIndex: itemId,
                  //same as container height
                  maxHeight: constraints.maxHeight * .1,
                  maxWidth: constraints.maxWidth,
                ),
              );

              itemId++;
            });
          },
        ),
        body: Stack(
          children: [
            Align(
              alignment: Alignment.topCenter, // you may want some changes here
              child: SizedBox(
                height: constraints.maxHeight,
                width: constraints.maxWidth,
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      ...List.generate(
                        22,
                        (index) => Container(
                          height: 100,
                          width: double.infinity,
                          color: index.isEven
                              ? Colors.deepPurple
                              : Colors.orangeAccent,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Positioned(
              top: constraints.maxHeight * .2,
              left: 0,
              right: 0,
              child: Container(
                width: overlayItems.length > 0 ? constraints.maxWidth : 0,
                height:
                    overlayItems.length > 0 ? constraints.maxHeight * .1 : 0,
                color: Colors.pinkAccent,
                child: Stack(
                  children: [
                    ...overlayItems.toList(),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}