//基础格式。Text组件
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Widgetdddddd',
home: Scaffold(
body: Center(
child: Text(
'Heldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgesteldlo Widgest',
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 25.0, color: Color.fromARGB(255, 255, 127, 127)),
),
),
));
}
}
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Widgetdddddd',
home: Scaffold(
body: Center(
child: Container(
child: new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg",
fit: BoxFit.contain,
repeat: ImageRepeat.repeat,
),
width: 300.0,
height: 200.0,
color: Colors.blue,
),
),
));
}
}
列表组件
import 'package:flutter/material.dart';
void main() =>
runApp(MyApp(items: new List<String>.generate(100, (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: 'ListView widget',
home: Scaffold(
body: new ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return new ListTile(
title: new Text('${items[index]}'),
);
})),
);
}
}
网格组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
appBar: new AppBar(title: new Text('网格组件')),
body: new Container(
child: new GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1,
),
children: <Widget>[
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
new Image.network(
"https://blogimages.jspang.com/blogtouxiang1.jpg"),
],
)),
),
);
}
}
布局:5种
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
appBar: new AppBar(title: new Text('Row布局')),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: () {},
color: Colors.blue,
child: new Text('Blue'),
),
Expanded(
child: new RaisedButton(
onPressed: () {},
color: Colors.orange,
child: new Text('Blue'),
)),
new RaisedButton(
onPressed: () {},
color: Colors.blue,
child: new Text('Blue'),
)
],
)),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
appBar: new AppBar(title: new Text('Colum布局')),
body: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Center(child: Text('I am JSPang')),
Expanded(child: Text('my website is jspang.com')),
Center(child: Text('I love coding'))
],
)),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.8),
children: <Widget>[
new CircleAvatar(
backgroundImage: new NetworkImage(
'https://blogimages.jspang.com/blogtouxiang1.jpg'),
radius: 100.0,
),
new Container(
decoration: new BoxDecoration(
color: Colors.lightBlue,
),
padding: EdgeInsets.all(5.0),
child: new Text('JSPang 技术胖'),
),
new Positioned(
top: 10.0,
left: 10.0,
child: new Text('JSPang.com'),
),
new Positioned(
bottom: 10.0,
right: 10.0,
child: new Text('技术胖'),
)
],
);
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('垂直方向布局'),
),
body: Center(child: stack),
),
);
}
}
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var card = new Card(
child: Column(
children: <Widget>[
ListTile(
title: new Text(
'吉林省吉林市昌邑区',
style: TextStyle(fontWeight: FontWeight.w500),
),
subtitle: new Text('技术胖:1513938888'),
leading: new Icon(
Icons.account_box,
color: Colors.lightBlue,
),
),
new Divider(),
ListTile(
title: new Text(
'北京市海淀区中国科技大学',
style: TextStyle(fontWeight: FontWeight.w500),
),
subtitle: new Text('胜宏宇:1513938888'),
leading: new Icon(
Icons.account_box,
color: Colors.lightBlue,
),
),
new Divider(),
ListTile(
title: new Text(
'河南省濮阳市百姓办公楼',
style: TextStyle(fontWeight: FontWeight.w500),
),
subtitle: new Text('JSPang:1513938888'),
leading: new Icon(
Icons.account_box,
color: Colors.lightBlue,
),
),
new Divider(),
],
),
);
return MaterialApp(
title: 'ListView widget',
home: Scaffold(
appBar: new AppBar(
title: new Text('卡片布局'),
),
body: Center(child: card),
),
);
}
}