【问题标题】:How to stretch an image when user scrolls in flutter当用户在颤动中滚动时如何拉伸图像
【发布时间】:2021-02-23 03:25:06
【问题描述】:

我想在用户滚动时拉伸图像。

Container(
 child: Image.asset(
  'assets/appHeader.png',
   fit: BoxFit.cover,
   width: size.width,
   height: 170,
 ),
)

此图像位于页面顶部,当用户向上滚动时,我想拉伸图像。 这就像 SliverAppBar 中的伸展。我对 Flutter 很陌生,所以我对动画不太了解。

【问题讨论】:

    标签: flutter flutter-animation


    【解决方案1】:

    此答案更新关于(您在评论中询问)(仅适用于我们讨论的这种情况)。

      @override
      Widget build(BuildContext context) {
        return Container(
          child: Stack(
            children: [
              Scaffold(
                  //same code that above write
                  )
            ],
          ),
        );
      }
    

    【讨论】:

    • 那我可以加一个栈吗??
    【解决方案2】:

    试试这个,我是用 FlexibleSpaceBar 创建的。

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 200.0,
                  floating: false,
                  //pinned: true, if you need to show appBar.
                  pinned: false,
    
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle: true,
                      title: Text("Image Text(optional)",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          )),
                      background: Image.network(
                        "https://miro.medium.com/max/700/1*_nCC_uFDVYas8uYa9m6fQQ.jpeg",
                        fit: BoxFit.cover,
                      )
                      /*-------Your Image here--------*/
                      /* Image.asset(
              'assets/appHeader.png',
              fit: BoxFit.cover,
              width: size.width,
              height: 170,
              ),*/
                      ),
                ),
              ];
            },
            body: Center(
              child: Text("Your screen data"),
            ),
          ),
        );
      }
    

    【讨论】:

    • 我不希望在滚动到底部时出现标题。
    • 好的,我会根据你的要求更新答案。
    • 另一个问题。我怎样才能在它上面放另一个容器?就像我们在堆栈中做的一样
    • 意味着..你需要在body.或任何其他地方添加容器。我不明白,“我怎样才能把另一个容器放在它上面??就像我们在堆栈中做的那样”'
    • 我想在 SliverAppBar 上添加容器
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-08-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多