关于android:Flutter-开发从-0-到-1三布局与-ListView

39次阅读

共计 3401 个字符,预计需要花费 9 分钟才能阅读完成。

上周日出去玩了,因而没工夫写文章。我司加班到 11 点,第二天能够早晨班一个小时,加班到 12 点,能够早晨班两个小时,以此类推,为什么说这个,对的,加班第二天我没有多睡觉,而是起来抓紧时间写文章,好了,废话不多说,进入明天的主题。

布局

说到 Android 布局,不是很难,会在对应的 xml 里布局,Flutter 里没有 xml,都在代码里写,给人感觉就很难,看下咱们要实现的布局:

关上 PhotoShop,看下背景色 #ededed,日期字体色彩 #a6a6a6,题目字体色彩 #1b1b1b,摘要字体色彩 #808080。

公众号这是列表,我先将 item 搞定。看这布局都是线性布局,这要在之前,分分钟搞定,但 Flutter……好吧,Flutter 布局可没那么简略,我花了好几个小时才做好,期间遇到了不少艰难。

Flutter 也有横向 Row 布局和竖向 Column 布局,我本想分 1 和 2 两个局部,最外层竖向 Column 蕴含 1 和 2,2 自身是 Column,蕴含一个 image 和两个 text,间接应用 Column 能够实现,当我须要设置 2 外面红色的背景色,发现 Column 基本没有背景色属性,于是把 2 最外层革新成 Container。

应用 Container 没有问题,布局也很快实现了,接下来是实现四角的圆角成果。

Container 有 decoration,能够实现圆角,我遇到了两个问题:

1、当 shape: BoxShape.circle 时不能设置 borderRadius,会异样
异样信息:’shape != BoxShape.circle ||borderRadius == null’: is not true.

2、应用 BoxDecoration
Container 不能应用 color,会报错:
Cannot provide both a color and a decoration
To provide both, use “decoration: BoxDecoration(color: color)”.

认为这样就实现了圆角,不,不会那么顺利的,发现图片基本没有圆角成果,这和之前 Java 实现形式不一样,最外层都实现了圆角,对外面的布局(图片)竟然没有失效,最初只好把布局实现如下:

分成 1、2、3 局部,3 还是 Container,2 和 3 圆角成果只对高低局部别离实现,残缺代码如下:

blogItem() {
    var date = new Padding(
        padding: const EdgeInsets.only(
          top: 20.0,
          left: 10.0,
          right: 10.0,
        ),
        child: new Text(
          '2020 年 6 月 28 日 22:49',
          textAlign: TextAlign.center,
          style: TextStyle(color: ColorCommon.dateColor, fontSize: 18),
        ));

    var cover = new Padding(
        padding: const EdgeInsets.only(
          top: 10.0,
          left: 10.0,
          right: 10.0,
        ),
        child: new ClipRRect(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0),
                topRight: Radius.circular(10.0)),
            child: new Image.network('http://pic1.win4000.com/wallpaper/2020-04-21/5e9e676001e20.jpg',)));

    var title = new Text(
      'APP 开发从 0 到 1(一)需要与筹备',
      style: TextStyle(color: ColorCommon.titleColor, fontSize: 22),
    );

    var summary = new Padding(
        padding: const EdgeInsets.only(top: 5.0,),
        child: new Text('一个人做一个我的项目,你也能够。',
            textAlign: TextAlign.left,
            style: TextStyle(color: ColorCommon.summaryColor, fontSize: 18)));

    var titleSummary = new Container(padding: const EdgeInsets.all(10.0),
      alignment: Alignment.topLeft,
      decoration: new BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0)),
        shape: BoxShape.rectangle,
      ),
      margin: const EdgeInsets.only(left: 10, right: 10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[title, summary],
      ),
    );

    var blogItem = new Column(children: <Widget>[date, cover, titleSummary, date, cover, titleSummary],
    );

    return blogItem;
  }

实际效果如下:

好了,对于 Flutter 布局就讲到这里,我只是针对这个我的项目所须要的去实现,Flutter 布局的货色还有很多,其属性让人眼花撩乱,能够去官网一个个去认真学习和实际。

ListView

blogItem 写好了,实现了大头,接下来就要填充实在的数据,在《APP 开发从 0 到 1(二)框架与网络》,有说到网络申请,其中有提到 setstate(){} 办法,调用这个办法会回调 build 办法,这样咱们能够在 build 办法加个判断,先加载 Progress,待网络数据申请完,再显示 ListView,代码如下:

@override
  Widget build(BuildContext context) {
    var content;
    if (blogList.isEmpty) {
      content = new Center(
        // 可选参数 child:
        child: new CircularProgressIndicator(),);
    } else {content = new ListView(children: blogItem());
    }

    return Scaffold(
      backgroundColor: ColorCommon.backgroundColor,
      appBar: AppBar(title: Text('AndBlog'),
      ),
      body: content,
      floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

blogItem() {List<Widget> widgets = [];
    for (int i = 0; i < blogList.length; i++) {Blog blog = blogList[i];
      var date = new Padding(
          padding: const EdgeInsets.only(
            top: 20.0,
            left: 10.0,
            right: 10.0,
          ),
          child: new Text(
            // 填充实在数据
            blog.date,
            textAlign: TextAlign.center,
            style: TextStyle(color: ColorCommon.dateColor, fontSize: 18),
          ));

      //……

      var blogItem = new Column(
        children: <Widget>[
          date,
          cover,
          titleSummary,
        ],
      );
      widgets.add(blogItem);
    }
    return widgets;
  }

这样 ListView 也实现了,接下来须要实现的是 ListView 加载更多。

正文完
 0