Flutter开发（2） 常用组件 Container,image

Container     容器

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      // theme: ThemeData(primarySwatch: Colors.blue,),
      home: Scaffold(
        appBar: AppBar(
          title: Text('laoniu home title'),
        ),
        body: Center(
          child: Container(
            child: new Text(
              'hello world',
              style:TextStyle(
                fontSize: 50,
                color: Color(0xffff0000),
              ),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,   //下面设置了渐变背景，此处必须去掉
            padding: const EdgeInsets.fromLTRB(10,30,0,0),//边距,左上右下
            margin: const EdgeInsets.all(10),//边距,左上右下
            decoration: new BoxDecoration(
              gradient:const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple],
              ),//渐变背景
//              border: Border.all(width:2.0,color:Colors.red),
                border: Border.all(color: Color(0xffff0000),width: 3.0,),
            ),
          ),
        )
      ),
    );
  }
}

 

 

image     图片

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
        appBar: AppBar(
          title: Text('laoniu home title'),
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588511842624&di=3defa624a4a23d281ae8dcd8d6fcefb2&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201608%2F04%2F20160804183940_QSuwZ.thumb.700_0.jpeg',
              //填充方式
              // fit: BoxFit.contain,//容器内等比缩放，有留白
              // fit: BoxFit.fill,//平铺满容器,宽高比例可变化
              // fit: BoxFit.fitWidth,//图片宽填满容器。宽高比不变，有留白或会裁剪
              // fit: BoxFit.fitHeight,//图片高填满容器。宽高比不变，有留白或会裁剪
              // fit: BoxFit.cover,//宽高比不变，无留白，会裁剪，综合fitwidth与fitheight的优点
              fit: BoxFit.scaleDown,//宽高比不变，可留白，不会裁剪，与cover相反
              
              //混合颜色，相当于给图片加特效  
              // color: Colors.greenAccent,//将此颜色以下列模式与图片混合
              // colorBlendMode: BlendMode.difference,//混合模式

              //重复的方式填满容器，影分身术
              // repeat: ImageRepeat.repeatY,//
              repeat: ImageRepeat.noRepeat,
              
            ),
            width:350,
            height:350,
            color: Colors.lightBlue,
          ),
        )
      ),
    );
  }
}