1.容器组件Container
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: '晴天',
home: Scaffold(
appBar: AppBar(title: Text('左边')),
body: Center(
child: Container(
width: 200,
height: 200,
//设置边框圆角
decoration: BoxDecoration(
color: Color.fromARGB(1, 255, 255, 255),
border: new Border.all(
color: Colors.grey,
width: 8.0,
),
borderRadius: const BorderRadius.all(const Radius.circular(8.0)),
),
child: Text(
'xingweixin',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 28.0),
),
),
),
),
);
}
}
2.图片组件Image
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: '晴天',
home: Scaffold(
appBar: AppBar(title: Text('左边')),
body: Center(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595423624277&di=8c2211cdf9549a4e4da3ac8d15c9142c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F21%2F20181021214329_ftnud.jpg",
fit: BoxFit.fill,
),
),
),
);
}
}
3.文本
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: '晴天',
home: Scaffold(
appBar: AppBar(title: Text('左边')),
body: Column(
children: <Widget>[
Text(
'红色字体 + 黑色删除线 + 18号 + 斜体 + 粗体',
style: TextStyle(
//字体颜色
color: const Color(0xffff0000),
//文本修饰器(删除线)
decoration: TextDecoration.lineThrough,
//文本修饰器(删除线)
decorationColor: const Color(0xff000000),
//字体大小
fontSize: 18,
//字体样式:是否斜体
fontStyle: FontStyle.italic,
//字体粗细
fontWeight: FontWeight.bold,
//文字间距
letterSpacing: 2.0),
),
Text(
'橙色 + 下划线 + 24号',
style: TextStyle(
//字体颜色
color: const Color(0xffff9900),
//文本修饰器(删除线)
decoration: TextDecoration.underline,
fontSize: 24,
),
),
Text(
'上划线_虚线 + 23号',
style: TextStyle(
//文本修饰器(删除线)
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 23,
//字体样式
fontStyle: FontStyle.normal,
),
),
Text(
'23+斜体+加粗+间距6',
style: TextStyle(
fontSize: 23,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
letterSpacing: 6.0,
),
)
],
)),
);
}
}
图标组件Icon
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: '晴天',
home: Scaffold(
appBar: AppBar(title: Text('左边')),
body: Center(
child: Icon(
Icons.phone,
color: Colors.green,
size: 40,
),
)
),
);
}
}
4.按钮组件RaisedButton
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'RaisedButton',
home: Scaffold(
appBar: AppBar(title: Text('RaisedButton')),
body: Center(
child: RaisedButton(
color: Colors.greenAccent,
child: Text('点我呀'),
onPressed: () {
print("他一定很爱你");
},
))),
);
}
}
5.列表组件ListView(纵向)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'RaisedButton',
home: Scaffold(
appBar: AppBar(title: Text('RaisedButton')),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(
Icons.add,
size: 20,
color: Colors.deepOrange,
),
title: Text('丫丫'),
),
ListTile(
leading: Icon(
Icons.phone,
size: 20,
color: Colors.greenAccent,
),
title: Text('xingweixin'),
),
ListTile(
leading: Icon(
Icons.arrow_forward_ios,
size: 20,
color: Colors.greenAccent,
),
title: Text('我'),
),
],
)),
);
}
}
6.列表组件(纵向)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
title: 'RaisedButton',
home: Scaffold(
appBar: AppBar(title: Text('RaisedButton')),
body: Container(
//顶部外边距
margin: EdgeInsets.symmetric(vertical: 20),
height: 200,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 160,
color: Colors.cyan,
),
Container(
width: 100,
color: Colors.lightBlue,
),
Container(
width: 100,
color: Colors.yellow,
)
],
),
)),
);
}
}
7.构建长列表
import 'package:flutter/material.dart';
void main() => runApp(new MyApp(
items: new List<String>.generate(200, (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) {
final title = '长列表';
// TODO: implement build
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.add),
title: Text('这是爱'),
);
},
)));
}
}
8.网格组件GridView
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = '网格列表';
// TODO: implement build
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 30.0,
crossAxisCount: 3,
children: <Widget>[
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
const Text("1"),
],
)));
}
}
网友评论