美文网首页
GestureDetector给flutter的widget增加

GestureDetector给flutter的widget增加

作者: iCloudEnd | 来源:发表于2019-02-14 17:32 被阅读16次

学习是轻松的,做项目是痛苦的。

学习flutter的过程非常轻松的,按照官方教程一步一步实现就可以了。遇到无法调通的部分,直接看教程的源码就解决了。而且完成之后似乎就有一种莫名的满足感。
然而一旦开始做实际的项目,作为一个初学者您将遇到各种千奇百怪的问题。

开发项目时遇到两个困惑

问题1 是否能够复用之前项目的思维流程

脑子里的流程还是之前开发项目的成功经验。如果之前流程和flutter的流程一致,那么恭喜您方向走对了,剩下的就是如何实现的问题了。如果流程和flutter的流程不一致,那么只能撞破南墙后才知道应该向北走。

解决方案: 平时多总结相关流程和经验,多研究设计模式,多关注新的模式和业内开发新流程。

问题2 想实现但是不知道该如何写

流程和模式都定了,剩下的就是如何实现的问题。通过我们会思考之前学习的demo是如何写的,然后通过改写demo来完成一个一个模块的功能。有时我们积累的demo代码不够时,我们需要去Google或官网上去搜索,看看类似功能别人是如何写的
解决方案: 这个层次的问题比较好解决,主要是拼的是代码量。平时要多积累好的代码,多写心得,多去github看看别人是如何写的。

实际案例

这两天打算的做个《燕京八景》的小App,思路都写这篇文章里了《flutter作品之燕京八景App》
今天是做个app第二天,第一页和第二页都已经完成了,接下来就是实现两页之间的切换问题。在iOS里面我们可以通过点击函数来实现。但是在flutter中也差不多,因此我从github上面找了了demo来学习。实现方法果然很简单,如下

onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext context) => SecondScreen(pair.toString())));
      },

于是我打算在自己项目里面试试看,由于之前自己的项目也是从基于另外一个开源代码修改的《flutter作品之燕京八景App》,没想到之前代码竟然拥有更为复杂的row widget。

class _AwesomeListItemState extends State<AwesomeListItem> {
  @override
  Widget build(BuildContext context) {
   return new Row(
      children: <Widget>[
        new Container(width: 10.0, height: 180.0, color: widget.color),
        new Expanded(
          child: new Padding(
            padding:
            const EdgeInsets.symmetric(vertical: 40.0, horizontal: 20.0),
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(
                  widget.title,
                  style: TextStyle(
                      color: Colors.grey.shade800,
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold),
                ),
                new Padding(
                  padding: const EdgeInsets.only(top: 16.0),
                  child: new Text(
                    widget.content,
                    style: TextStyle(
                        color: Colors.grey.shade500,
                        fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ],
            ),
          ),
        ),
        new Container(
          height: 150.0,
          width: 150.0,
          color: Colors.white,
          child: Stack(
            children: <Widget>[
              new Transform.translate(
                offset: new Offset(50.0, 0.0),
                child: new Container(
                  height: 100.0,
                  width: 100.0,
                  color: widget.color,
                ),
              ),
              new Transform.translate(
                offset: Offset(10.0, 20.0),
                child: new Card(
                  elevation: 20.0,
                  child: new Container(
                    height: 120.0,
                    width: 120.0,
                    decoration: new BoxDecoration(
                        color: Colors.white,
                        border: Border.all(
                            width: 10.0,
                            color: Colors.white,
                            style: BorderStyle.solid),
                        image: DecorationImage(
                          image: AssetImage(widget.image),
                        )),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
   
}

相信看到此处的朋友都能体会我此刻的心情,看了前路有茫茫了。

相关文章

网友评论

      本文标题:GestureDetector给flutter的widget增加

      本文链接:https://www.haomeiwen.com/subject/kmzeeqtx.html