首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >我怎样才能把一个容器放大成一个新的屏幕?

我怎样才能把一个容器放大成一个新的屏幕?
EN

Stack Overflow用户
提问于 2021-06-13 01:50:21
回答 2查看 41关注 0票数 0

我正在尝试归档一个UI,这个UI是由来自运球:https://dribbble.com/shots/14891203-Banking-Mobile-App的亚历克斯启发的。我尝试使用自定义页面查看和一些软件包,但我没有得到任何东西。最后我写了这样的东西

代码语言:javascript
复制
ScrollController _scrollController = new ScrollController();
double enlargeSize = 0;
double reduceSize = 1;
const mainColor = Color(0xff6D64ED);
const primaryColor = Color(0xff0170F2);
const fadedColor = Color(0xff5552A5);
const secColor = Color(0xff080F4A);

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        setState(() {
          enlargeSize = _scrollController.offset < 0 ?
              -1*_scrollController.offset : 1;
        });
      });
  }

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


  @override
  Widget build(BuildContext context) {

    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          alignment: Alignment.center,
          children: [

            enlargeSize < 70 ?
            Align(
                alignment: Alignment.topCenter,
                child: Container(
                  // height: height*.25,
                    width: width*.95,
                    alignment: Alignment.centerLeft,
                    child: Center(
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        controller: _scrollController,
                        physics: BouncingScrollPhysics(),
                        children: <Widget>[

                          //Analytics
                          Container(
                            child: Stack(
                              alignment: Alignment.center,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(
                                      right: 20.0+(enlargeSize*5)
                                  ),
                                  child:  Container(
                                    width: (width*.4)+enlargeSize*1,
                                    height: (height*.21)+enlargeSize*3,
                                    decoration: homeBox.copyWith(
                                        color: secColor,
                                        borderRadius: BorderRadius.circular(28)
                                    ),
                                    alignment: Alignment.center,
                                    child: Text(
                                      'Catalogues',
                                      style: GoogleFonts.archivo(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: width*.4,
                                  height: height*.25,
                                  decoration: homeBox.copyWith(
                                    color: Colors.deepPurple[800],
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    'Analytics',
                                    style: GoogleFonts.archivo(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),

                          SizedBox(width: 0),
                          //Analytics
                          Center(
                            child: Container(
                              width: width*.4,
                              height: height*.25,
                              decoration: homeBox.copyWith(
                                color: primaryColor,
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                'Catalogues',
                                style: GoogleFonts.archivo(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          ),SizedBox(width: 8),
                          //AI Camera
                          Center(
                            child: Container(
                              width: width*.4,
                              height: height*.25,
                              decoration: homeBox.copyWith(
                                color: secColor,
                              ),
                              alignment: Alignment.center,
                              child: Text(
                                'AI Camera',
                                style: GoogleFonts.archivo(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                )
            ):
            GestureDetector(
              onHorizontalDragUpdate: (DragUpdateDetails details){
                print("Details : ${details.delta.dx} ");
                setState(() {
                  details.delta.dx > 0 ?
                  reduceSize = 1:
                  reduceSize = details.delta.dx;

                });
              },
              child: Align(
                alignment: Alignment.center,
                child: Container(
                  width: width,
                  height: height,
                  decoration: homeBox.copyWith(
                      color: secColor,
                      borderRadius: BorderRadius.circular(0)
                  ),

                  child: Stack(
                    children: [
                      // Container(
                      //   color: secColor,
                      // ),

                      Align(
                        alignment: Alignment.topCenter,
                        child: AppBar(
                          centerTitle: true,
                          backgroundColor: secColor,
                          title: Text(
                            'Catalogues',
                            style: GoogleFonts.archivo(
                              color: Colors.white,
                              fontWeight: FontWeight.w700,
                              fontSize: 16
                            ),
                          ),
                          leading: IconButton(
                            onPressed: (){
                              setState(() {
                                enlargeSize = 1;
                              });
                            },
                            icon: Icon(Icons.arrow_back_ios_rounded),
                            color: Colors.white,

                          ),
                        ),
                      ),



                    ],
                  )
                ),
              ),
            ),

          ],
        )
      )
    );
  }

它仍然不完全像UI,请帮助或建议我如何能更好地存档。另外,让我知道我是否不清楚,或我是否需要重写我的问题以不同的方式。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-13 02:28:18

动画包可能会对此有所帮助。

票数 2
EN

Stack Overflow用户

发布于 2021-06-13 04:59:19

最简单的方法是在堆栈中使用AnimatedContainer

但是最好的方法是使用MickaelHrndz提到的动画包

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67954219

复制
相关文章

相似问题

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