将故事项更改为动态的窗口小部件 [英] change story items as dynamic widgets in flutter

问题描述

我想将故事项实现为不同的小部件.像本例一样:

I want to implement story items as different widgets. Like in this example:

在此图片中，仅图像被更改，但我希望将整个窗口小部件更改为故事项.

In this picture, only images are changed, but I want to change as whole widgets as story items.

我尝试了 story_view包.但是，在此程序包中，只能添加图像和视频.还有其他图书馆吗?

I have tried the story_view package. But, in this package, only images and videos can be added. Is there any other library for that?

推荐答案

使用堆栈，容器和 GestureDetector 可以在页面/故事之间进行切换.

This can be easily achieved with Stack, Container, and a GestureDetector to switch between pages/stories.

为什么堆栈?

如果您想重叠几个，

Flutter的堆栈很有用以一种简单的方式，例如具有一些文本和图像的孩子，覆盖有渐变，底部有一个按钮.

Flutter's Stack is useful if you want to overlap several children in a simple way, for example, having some text and an image, overlaid with a gradient and a button attached to the bottom.

要处理您的固定"广告，视图，在这种情况下为:

To handle your "fixed" views, which are, in this case:

1. 进度条...您可以根据需要创建自定义进度条.
2. 该图片和用户名...

我们称它们为 myTopFixedWidgets()

行(子代:[CircleAvatar(...)，列(子代:[Text(...)，Text(...)]，)]，)

现在，将要显示并更改(您的故事")的 Widget 作为 Stacks 的第一项，然后放置Widgets 1.和2.(上面提到的)在列表的第二项中.

Now, put your Widget that you want to display and that changes (your "story") as the first item of the Stacks and place the Widgets 1. and 2. (mentioned above) in the second item of the list.

维护变量 index 以选择要显示的小部件.

Maintain a variable index to choose the widget that you want to display.

Stack(
  children: <Widget>[
    widgetsToShowAsAStory[index],
    myTopFixedWidgets() //mentioned above
  ],
) 

将其包装在 GestureDetector

List<Widget> widgetsToShowAsAStory = [];

var index = 0;
....
GestureDetector(
  onTap: () { 
    //If the tap is on the LEFT side of the screen then decrement the value of the index
    index-= 1;  //(check for negatives)

    //If the tap is on the RIGHT side of the screen then increment the value of the index 
    index+= 1;  //(check for the size of list)

    //call 
    setState() {}
  },
  child: Stack(
  children: <Widget>[
    widgetsToShowAsAStory[index],
    myTopFixedWidgets()
  ],
),)

繁荣起来，你很好！

这篇关于将故事项更改为动态的窗口小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！