一个Web前端的flutter学习笔记（一）

Flutter 学习笔记一

基础文本组件

Text(
    'hello world', // 文本内容
    style: TextStyle(
        fontSize: 24.00,
        color: Colors.redAccent,
        fontWeight: FontWeight.w300,
    ), // 设置文本样式
    maxLines: 2, // 通过maxLines进行行数限制
    overflow: TextOverflow.ellipsis, // 文本溢出省略
)

图标组件

Icon(
    Icons.phone_in_talk,
    color: Colors.blueAccent,
)

图片组件

String imgUrl = 'https://tuchong.pstatp.com/314506/f/4196061.jpg';

Image.network(
    imgUrl, // 图片地址
    height: 100,
    fit: BoxFit.cover, // 展示的图片剪裁类型
),

Image.asset('assets/images/avatar.jpeg'),

Image.file(File),

容器组件

Container(
    child: Text( // 内部元素 - 文本组件
        'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
        style: TextStyle(
            fontSize: 24.00,
            color: Colors.redAccent,
            fontWeight: FontWeight.w300,
        ),
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
    ),
    alignment: Alignment.topLeft, // 位置
    width: 375.0,
    height: 375.0,
    // color: Colors.blue,
    padding: const EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 20.0), // 内边距
    margin: EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0), // 外边距
    decoration: BoxDecoration(
        gradient: LinearGradient( // 渐变
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        border: Border.all( // 边框
            color: Colors.black,
            width: 10.0,
        ),
    ),
),