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