import 'package:flutter/material.dart';
import 'package:flutterapp/main-1.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter APP'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2.0/1.0,//此时宽度占满于整个屏幕,高度是宽度的1/2
child: Container(
color:Colors.red
),
);
}
}
Card 是卡片组件块,内容可以由大多数类型的 Widget 构成,Card 具有圆角和阴影,这让它 看起来有立体感。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter APP'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children:<Widget>[
Card(
margin:EdgeInsets.all(10),//和外层元素的距离
child: Column(
children: <Widget>[
ListTile(
title: Text(
'张三',
style: TextStyle(
fontSize:30.0
),
),
subtitle: Text('1111111111'),
),
ListTile(
title: Text(
'电话:183xxxxxxxx',
),
),
ListTile(
title: Text(
'地址:xxxxxxxxxxxx',
),
)
],
),
),
Card(
margin:EdgeInsets.all(10),//和外层元素的距离
child: Column(
children: <Widget>[
ListTile(
title: Text(
'张三',
style: TextStyle(
fontSize:30.0
),
),
subtitle: Text('1111111111'),
),
ListTile(
title: Text(
'电话:183xxxxxxxx',
),
),
ListTile(
title: Text(
'地址:xxxxxxxxxxxx',
),
)
],
),
),
Card(
margin:EdgeInsets.all(10),//和外层元素的距离
child: Column(
children: <Widget>[
ListTile(
title: Text(
'张三',
style: TextStyle(
fontSize:30.0
),
),
subtitle: Text('1111111111'),
),
ListTile(
title: Text(
'电话:183xxxxxxxx',
),
),
ListTile(
title: Text(
'地址:xxxxxxxxxxxx',
),
)
],
),
)
]
);
}
}
Flutter 中通过 RaisedButton 定义一个按钮。RaisedButton 里面有很多的参数,
Wrap 可以实现流布局,单行的 Wrap 跟 Row 表现几乎一致,单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的,Wrap 则突破了这个限制,mainAxis 上空 间不足时,则向 crossAxis上去扩展显示。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('flutter APP'),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
spacing: 10,
children: <Widget>[
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
MyButton("111"),
],
);
}
}
class MyButton extends StatelessWidget{
final String text;
const MyButton(this.text,{Key key, }) : super(key: key);
@override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(this.text),
textColor: Theme.of(context).accentColor,
onPressed: () {},
);
}
}