Flutter 入门笔记 二

Text Widget 的使用

代码示例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text(
            'Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!',
            // textAlign: TextAlign.center,
            // textAlign: TextAlign.start,
            // textAlign: TextAlign.end,
            // textAlign: TextAlign.right,
            textAlign: TextAlign.left,
            maxLines: 1,
            // overflow: TextOverflow.clip,
            // overflow: TextOverflow.ellipsis,
            overflow: TextOverflow.fade,
            style: TextStyle(
              fontSize: 25.0, //浮点数
              color: Color.fromARGB(255, 255, 125, 125),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.solid,
            ),
          ),
        ),
      ),
    );
  }
}

运行界面：

Container Widget 的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //Container Widget 实例
        body: Center(
          child: Container(
            child: new Text(
              'Hello Jessie',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10.0),
            padding: const EdgeInsets.fromLTRB(10.0, 100.0, 0.0, 0.0),
            margin: const EdgeInsets.all(10.0),
            decoration: new BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple
                ]),
                border: Border.all(width: 5.0, color: Colors.red)),
          ),
        ),
      ),
    );
  }
}

运行界面：

Image 组件的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
  
        //Image 组件实例
        body: Center(
          child: Container(
            child: new Image.network(
              'https://ss0.baidu.com/6ON1bjeh1BF3odCf/it/u=717056753,1154007395&fm=15&gp=0.jpg',

              //fit: BoxFit.contain, //对图片不做任何修改
              //fit: BoxFit.fill, //以容器为基础,充满容器
              //fit: BoxFit.cover, //不变形式裁切
              // fit: BoxFit.fitWidth, //充满横向

              // color: Colors.lightBlue,
              // colorBlendMode: BlendMode.darken, //混合属性

              // repeat: ImageRepeat.repeat,
              // repeat: ImageRepeat.repeatX,
              repeat: ImageRepeat.noRepeat,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

运行界面：

ListView 组件的使用

ListView 组件简介

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView 实例
        body: new ListView(
          children: <Widget>[
            // new ListTile(
            //   leading: new Icon(Icons.perm_camera_mic),
            //   title: new Text('perm_camera_mic'),
            // ),
            // new ListTile(
            //   leading: new Icon(Icons.add_call),
            //   title: new Text('add_call'),
            // ),
            // new ListTile(
            //   leading: new Icon(Icons.access_time),
            //   title: new Text('access_time'),
            // ),

            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png'),
            new Image.network(
                'https://ss2.baidu.com/6ON1bjeh1BF3odCf/it/u=2772149407,2145032160&fm=15&gp=0.jpg'),
            new Image.network(
                'https://img.zcool.cn/community/0168315aa64e28a801206d96fc6feb.png@1280w_1l_2o_100sh.png'),
            new Image.network(
                'https://img.zcool.cn/community/01e9245aa64e28a801206d96c1138e.png@1280w_1l_2o_100sh.png'),
          ],
        ),
      ),
    );
  }
}

运行界面：

ListView 横向列表的使用

代码实例一：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView 横向列表的使用
        body: Center(
          child: Container(
            height: 200.0,
            child: new ListView(
              scrollDirection: Axis.horizontal, //横向
              children: <Widget>[
                new Container(
                  width: 180.0,
                  color: Colors.lightBlue,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.amber,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.deepOrange,
                ),
                new Container(
                  width: 180.0,
                  color: Colors.deepPurpleAccent,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

代码实例二：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp());
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //将ListView写到外部
        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: 180.0,
          color: Colors.lightBlue,
        ),
        new Container(
          width: 180.0,
          color: Colors.amber,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepOrange,
        ),
        new Container(
          width: 180.0,
          color: Colors.deepPurpleAccent,
        ),
      ],
    );
  }
}

运行界面：

ListView 动态列表的使用

代码实例：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.

  final List<String> items;
  MyApp({
    
    Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //ListView动态列表的使用
        body: new ListView.builder(
          //构建动态列表
          itemCount: items.length,
          itemBuilder: (context, index) {
    
    
            return new ListTile(
              title: new Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

运行界面：

GridView 网格列表的使用

代码实例一：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.

  final List<String> items;
  MyApp({
    
    Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //GridView 网格列表的使用
        body: GridView.count(
          padding: const EdgeInsets.all(20.0),
          crossAxisSpacing: 10.0, //Axis是轴的意思,crossAxisSpacing是轴的距离
          crossAxisCount: 3, //每行显示多少列
          children: [
            //children为子元素,也就是每个网格装的东西
            const Text('I am Jessie1'),
            const Text('I am Jessie2'),
            const Text('I am Jessie3'),
            const Text('I am Jessie4'),
            const Text('I am Jessie5'),
            const Text('I am Jessie6'),
          ],
        ),
      ),
    );
  }
}

运行界面一：

代码实例二：

//引入UI库,material-ui官网:https://material-ui.com/zh/
import 'package:flutter/material.dart'; //dart与js不同,dart是一定要加末尾的分号的

void main() {
    
    
  runApp(MyApp(
    // items: List(), //非固定长度的list
    // items: List(1000), //固定长度的list
    items: new List<String>.generate(
        1000, (index) => "Item $index"), //index相当于数组下标
  ));
}
/*
同样的意思,使用箭头函数的写法:
void main() => runApp(MyApp());
*/

class MyApp extends StatelessWidget {
    
    
  // This widget is the root of your application.

  final List<String> items;
  MyApp({
    
    Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),

        //GridView 网格列表的使用2
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, //每行显示3列
            mainAxisSpacing: 2.0, //主轴(纵轴)的距离
            crossAxisSpacing: 2.0, //横轴的距离
            childAspectRatio: 1.0, //横竖比(宽/高)
          ),
          children: [
            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0168315aa64e28a801206d96fc6feb.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01e9245aa64e28a801206d96c1138e.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0162f05aa64e28a801206d96f0e492.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01b35e5aa64e28a80121246de56679.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01cac35aa64e28a80121246dc2a309.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/01dfb05aa64e28a80121246d5dca91.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0156cb5aa64e28a801206d96f870f8.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/014ab55aa64e28a80121246d310ae0.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
            new Image.network(
                'https://img.zcool.cn/community/0105d85aa64e28a80121246d8d695c.png@1280w_1l_2o_100sh.png',
                fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}

运行界面二：
3