Flutter的教程三:Row/Column布局

本文将实现一个MatrtialApp,将更熟悉Flutter的布局机制如何工作,如何垂直和水平布局widget,如何组合widget组成更复杂的widget

1.准备工作,因为有需要显示img,所以我们需要做一些准备工作 
项目的根目录创建文件存放图片 
这里写图片描述

pubspec.yaml文件中添加如下:

这里写图片描述

最后点击get即可,和使用命令行是一样的

这里写图片描述

这样我们的准备工作做完了,当然你可以使用你自己的图片 
先看下运行效果:

这里写图片描述

下面开始撸,为了便于理解,整体将分为几部分实现,最后组合即可

import 'package:flutter/material.dart';

/**
 * 在flutter中构建布局

 * flutter的布局机制如何工作
 * 如何垂直和水平布局widget
 *如何构建一个flutter布局
 */
void main() {
  runApp(new MaterialApp(
    title: "",
    home: new MyApp(),
  ));
}

/**
 * 实现标题行
 */
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      //整体是一个水平布局
      child: new Row(
        children: [
          //这里用Expanded的好处就是 会占用icon之外的剩余空间
          new Expanded(
            //在Expanded内创建一个垂直布局 放置两个文本
              child: new Column(
                //文本是起始端对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  new Container(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Text(
                      "Oeschinen Lake Campground",
                      style: new TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                  new Text(
                    "Kandersteg, Switzerland",
                    style: new TextStyle(
                      color: Colors.grey[500],
                    ),
                  )
                ],
              )),
          new Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          new Text('41')
        ],
      ),
    );

    /**
     * 抽取button行的代码复用
     */
    Column getText(IconData icon, String text) {
      return new Column(
        //聚集widgets
        mainAxisSize: MainAxisSize.min,
        //child 居中
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: Colors.blue[500]),
          new Container(
              margin: const EdgeInsets.only(top: 8.0),
              child: new Text(
                text,
                style: new TextStyle(
                  color: Colors.blue[500],
                ),
              ))
        ],
      );
    }

    /**
     * 实现按钮部分
     */
    Widget buttonSection = new Container(
      child: new Row(
        //MainAxisAlignment.spaceEvenly平均分配子空间  他会在每个子项之间,之前,之后平均分配空闲空间 当然也可以使用Expanded来实现
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          getText(Icons.call, "CALL"),
          getText(Icons.near_me, "ROUTE"),
          getText(Icons.share, "SHARE")
        ],
      ),
    );

    /**
     * 实现文本部分

     */
    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
          "Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.",
          softWrap: true),//softWrap: true 文本是否在换行符处中断
    );

    /**
     * 整合
     */
    return new MaterialApp(
      title: "Flutter Layout",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Flutter Layout"),
        ),
        body: new ListView(
          children: [
            new Image.asset(
              "images/lake.jpg",
              width: 600.0,
              height: 240.0,
              //类似于Android的scaleType 此处让图片尽可能小 以覆盖整个widget
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值