Flutter -整体体验

Hello World

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),
        ),
        body: Center(
          child: Text('Hello World - Welcome'),
        )
      )
    );
  }
}

HelloWorld

TextWidget


1、常用属性

① textAlign

enum TextAlign {
  left,
  right,
  center,
  justify,
  start,
  end,
}

② overflow

enum TextOverflow {
  clip,
  fade,
  ellipsis,
}

③ maxLines


【demo】

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome - Flutter freshman'),
        ),
        body: Center(
          child: Text('Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。',
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
        )
      )
    );
  }
}

基本属性

2、TextStyle

① fontSize
② color
③ decoration

  static const TextDecoration none = const TextDecoration._(0x0);
  static const TextDecoration underline = const TextDecoration._(0x1);
  static const TextDecoration overline = const TextDecoration._(0x2);
  static const TextDecoration lineThrough = const TextDecoration._(0x4);

④ decorationStyle

enum TextDecorationStyle {
  solid,
  double,
  dotted,
  dashed,
  wavy
}

【demo】

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome - Flutter freshman'),
        ),
        body: Center(
          child: Text('Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。',
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 18.0,
              color: Color.fromARGB(255, 255, 180, 180),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dotted
            ),
          ),
        )
      )
    );
  }
}

textAlign

Container

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome - Flutter freshman'),
        ),
        body: Center(
          child: Container(
            child: new Text(
              'Hello Imooc',
              style:TextStyle(fontSize:40.0),
            ),
            alignment: Alignment.center,
            width: 300,
            height: 200,
            color: Colors.lightBlue,
          )
        )
      )
    );
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome - Flutter freshman'),
        ),
        body: Center(
          child: Container(
            child: new Text(
              'Hello Flutter freshman -- Hi',
              style:TextStyle(fontSize:40.0),
            ),
            alignment: Alignment.topLeft,
            width: 300,
            height: 200,
            padding: const EdgeInsets.fromLTRB(40.0, 0.0, 5.0, 0.0),
            margin: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple
                ]
              )
            ),
          )
        )
      )
    );
  }
}

BoxDecoration

Debug模式介绍

BoxFit

enum BoxFit {
  fill,
  contain,
  cover,
  fitWidth,
  fitHeight,
  none,
  scaleDown,
}

colorBlendMode

enum BlendMode {
  clear,
  src,
  dst,
  srcOver,
  dstOver,
  srcIn,
  dstIn,
  srcOut,
  dstOut,
  srcATop,
  dstATop,
  xor,
  plus,
  modulate,
  screen, 
  overlay,
  darken,
  lighten,
  colorDodge,
  colorBurn,
  hardLight,
  softLight,
  difference,
  exclusion,
  multiply, 
  hue,
  saturation,
  color,
  luminosity,
}

[demo]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome - Flutter freshman'),
        ),
        body: Center(
          child: Container(
            child: new Image.network(
              'http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg',
              scale: 2.0,
              color: Colors.greenAccent,
              colorBlendMode: BlendMode.difference,
              fit: BoxFit.fitWidth
            ),
            width: 400,
            height: 200,
          )
        )
      )
    );
  }
}

ListView

1、ListTile

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override

  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'List_View Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView(
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.border_right),
                title:new Text('border_right'),
            ),
            new ListTile(
              leading: new Icon(Icons.android),
                title: new Text('Android'),
            ),
            new ListTile(
              leading: new Icon(Icons.arrow_forward_ios),
                title: new Text('iOS'),
            ),
          ],
        ),
      ),
    );
  }
}

ListView

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override

  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'List_View Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView(
          children: <Widget>[
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/9d2749b406d01a9641bacfdfc628425d.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/3d0fc3d8478a476a4cb6887d31ba0126.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/03/04356e5e5bcf7567eb6a52787c0ff8f3.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/de831517a93623a756dbe0ad2da9199d.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/9d2749b406d01a9641bacfdfc628425d.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/02/3d0fc3d8478a476a4cb6887d31ba0126.jpg'),
            new Image.network('http://bpic.588ku.com/element_banner/20/19/03/04356e5e5bcf7567eb6a52787c0ff8f3.jpg'),
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述

横向列表及自定义组件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override

  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'List_View Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: Center(
          child: Container(
            height: 200.0,
            child: MyList()
          ),
        )
      ),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      new Container(
        width: 300.0,
        color: Colors.lightBlue,
      ),
      new Container(
        width: 50.0,
        color: Colors.yellow,
      ),
      new Container(
        width: 100.0,
        color: Colors.greenAccent,
      ),
      new Container(
        width: 500.0,
        color: Colors.redAccent,
      )
    ]);
  }
}

在这里插入图片描述

动态列表

创建方式

  • 不固定长度: new List();
  • 固定长度 new List(2);
  • 固定长度和类型 new List(2);
  • items:[1, 2, 3, 4];
import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items:new List<String>.generate(12, (i)=>"Item:$i")
));

class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key, 
    @required this.items
  }):super(key:key); // 构造方法

  @override
  Widget build (BuildContext context) {
    return MaterialApp(
      title: 'List_View Demo',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListView Widget'),
        ),
        body: new ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index){
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          }
        )
      ),
    );
  }
}

动态列表

GridView网格列表

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影院',
      home: Scaffold(
        appBar: new AppBar(
          title: Text('挑选电影'),
        ),
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 2.0,
            crossAxisSpacing: 2.0,
            childAspectRatio: 0.7
          ),
          children: <Widget>[
            new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i2/TB1plvqDSzqK1RjSZFjXXblCFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB1ef7oExTpK1RjSZFGXXcHqFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i3/TB14hYPAVzqK1RjSZFCXXbbxVXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB105jXDCzqK1RjSZFpXXakSXXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1ca7QDIfpK1RjSZFOXXa6nFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i1/TB1JVy.FzDpK1RjSZFrXXa78VXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            ),
            new Image.network('https://img.alicdn.com/bao/uploaded/i4/TB1j2qVEMTqK1RjSZPhXXXfOFXa_.jpg_300x300.jpg',
              fit: BoxFit.cover,
            )
          ],
        )
      ),
    );
  }
}

GridView网格列表

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值