首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使圆弧(曲线)旋转木马( ListVie,行小工具)在颤动?

如何使圆弧(曲线)旋转木马( ListVie,行小工具)在颤动?
EN

Stack Overflow用户
提问于 2020-01-19 18:12:56
回答 1查看 479关注 0票数 1

我想有一个旋转木马/滑动/行的元素(图像/图标)遵循路径的曲线(圆弧),我想滚动的元素在曲线路径不是在直线路径,请分享如果你有任何想法。您可以在下面的链接中查看示例:

https://github.com/walmartlabs/curved-carousel

enter image description here

EN

Stack Overflow用户

发布于 2020-05-15 08:29:03

是的,你可以检查一下,我用的是PageView:

例如:

代码语言:javascript
运行
复制
class _MyHomePageState extends State<MyHomePage> {
  PageController _pageController =
      PageController(initialPage: 0, viewportFraction: 0.2);
  int pageChangedIndex = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[

            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            PageView.builder(
                itemCount: 20,
                controller: _pageController,
                physics: BouncingScrollPhysics(),
                onPageChanged: (index) {
                  setState(() {
                    pageChangedIndex = index;
                  });
                },
                itemBuilder: (context, index) {
                  print(pageChangedIndex.toString() + '  ' + index.toString());
                  final scale = max(SCALE_FRACTION,
                      (FULL_SCALE - (index - pageChangedIndex).abs()) + 0.2);
                  return Stack(
                    children: <Widget>[
                      AnimatedPositioned(
                        duration: Duration(milliseconds: 600),
                        bottom: index - 2 == pageChangedIndex
                            ? 10.0
                            : index - 1 == pageChangedIndex
                                ? 30
                                : index + 1 == pageChangedIndex
                                    ? 30.0
                                    : index + 2 == pageChangedIndex
                                        ? 10.0
                                        : index == pageChangedIndex
                                            ? 50.0
                                            : 10.0,
                        child: Container(
                          color: Colors.red,
                          // height: pageChangedIndex == index
                          //     ? PAGER_HEIGHT * scale
                          //     : 45.0,
                          // width: pageChangedIndex == index
                          //     ? PAGER_HEIGHT * scale
                          //     : 45.0,
                          child: Text('hey there'),
                        ),
                      ),
                    ],
                  );
                }),
          ],
        ),
      ),
    );
  }
}
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59809068

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档