flutter基础(常用控件)- 四

Container控件---容器

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter容器container",
    home: new ContainerDemo(),
  ));
}


class ContainerDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Container(
        width: 80.0,
        height: 80.0,
        decoration: new BoxDecoration(
          color: Colors.lightBlueAccent[100],
        ),
      ),
    );
  }
}

通过decoration属性创建一个BoxDecoration对象,BoxDecoration对象描述如何绘制容器(如:添加边框,颜色等)

 

Text控件 -- 文本

import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter控件-文本",
    home: new ContainerDemo(),
  ));
}

class ContainerDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("文本控件"),
      ),
      body: new Column(
        children: <Widget>[
          new Text(
            "文本控件一",
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0,
            ),
          ),
          new Text(
            '橙色+下划线+24号',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,
            ),
          ),
          new Text(
            '虚线上划线+23号+倾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
        ],
      ),
    );
  }
}

 

Image  -- 图片控件

  • new Image,用于从ImageProvider获取图像。
  • new Image.asset,用于使用key从AssetBundle获取图像。
  • new Image.network,用于从URL地址获取图像。
  • new Image.file,用于从File获取图像。
import 'package:flutter/material.dart';

void main(){
  runApp(new MaterialApp(
    title: "flutter控件-图片",
    home: new ImageDemo(),
  ));
}
class ImageDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("image图片控件"),
      ),
      body: new Center(
        child: new Image.network( 'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg',//网络地址
          scale: 2.0,),
      ),
    );
  }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值