一.Text
Text(
'This is a Text, 快用flutter, 这个简直66666666666666666666666666了',
textAlign: TextAlign.center, //左右对齐
maxLines: 1, //最多显示几行
overflow: TextOverflow.ellipsis,//结尾变成.....
style: TextStyle(
fontSize: 25.0,
color: Color.fromARGB(255, 255, 125, 125),
decoration: TextDecoration.underline, //下划线
decorationStyle: TextDecorationStyle.dashed,//下划线样式
),
),
二.Container
Container(
child: new Text(
'Thisis A Text',
style: TextStyle(fontSize: 40),
),
alignment: Alignment.topLeft, //子控件的对齐方式
width: 500.0,
height: 400.0,
//color: Colors.lightBlue, //背景色
padding: const EdgeInsets.fromLTRB(10.0, 60.0, 0, 0),//内边距
margin: const EdgeInsets.all(20.0), //距离父视图的边距
decoration: new BoxDecoration( //装饰
gradient: const LinearGradient(
colors: [Colors.lightBlue, Colors.greenAccent, Colors.black],
),
border: Border.all(width: 5.0, color: Colors.red), //边框
),
)
三.Image
Container(
child: new Image.network(
'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594303802&di=8a3d6d6fa849a2d10905bf58b853d3fb&src=http://hbimg.b0.upaiyun.com/2f6ae348b19c83fdc721ca5a54d4adb8d7455fa31dc76-GMqiCq_fw658',
// fit: BoxFit.contain,//填充模式 -> 尽力方法,但是不会拉伸
// color: Colors.blue,
// colorBlendMode: BlendMode.darken, //颜色混合,相当于滤镜了
repeat: ImageRepeat.repeatX, //图片重复填充container,横向填充
),
width: 300.0,
height: 300.0,
color: Colors.green,
),
四.ListView
//横向
new ListView(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.accessibility_new),
title: Text("tile"),
),
new ListTile(
leading: new Icon(Icons.account_balance),
title: Text("tile_two"),
),
new Image.network('https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594303802&di=8a3d6d6fa849a2d10905bf58b853d3fb&src=http://hbimg.b0.upaiyun.com/2f6ae348b19c83fdc721ca5a54d4adb8d7455fa31dc76-GMqiCq_fw658'),
],
//纵向
class MyListView extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
new Container(
width: 180.0,
color: Colors.lightBlue,
),new Container(
width: 180.0,
color: Colors.green,
),new Container(
width: 180.0,
color: Colors.purple,
),new Container(
width: 180.0,
color: Colors.red,
),
],
);
}
}
//动态高度
void main() => runApp(MyApp(
items: List<String>.generate(1000, (index) => "item $index"),
));
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:'Welcome to Flutter',
home:Scaffold(
appBar: new AppBar(
title: Text('this is a bar'),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index){
return new ListTile(
title: new Text('${items[index]}')
);
},
)
)
);
}
}
五.网格列表
网友评论