标签:file height context main turn 图片 generate caff 一个
属性
style文字的样式
body: new Center( child: new Text(‘非淡泊无以明志,非宁静无以致远。(诸葛亮)‘, textAlign: TextAlign.left, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 20, color: Color.fromARGB(255, 0, 0, 255), decoration: TextDecoration.underline, decorationStyle: TextDecorationStyle.solid, fontStyle: FontStyle.italic, )), ),
body: new Center( child: new Container( child: new Text( ‘非淡泊无以明志,非宁静无以致远。(诸葛亮)‘, style: TextStyle(fontSize: 30.0), ), alignment: Alignment.topLeft, width: 500.0, height: 200.0, //color: Colors.lightBlue, //padding: const EdgeInsets.all(10), //内边距 padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0, 0), margin: const EdgeInsets.all(20.0), decoration: new BoxDecoration( gradient: const LinearGradient( colors: [Colors.lightBlue, Colors.green, Colors.purple] ), border: Border.all(width: 5.0,color:Colors.red ), ), ), ),
加入图片的方式:
fit属性
repeat属性
body: new Center( child: new Container( child: new Image.network( ‘https://profile.csdnimg.cn/0/5/2/1_jyd0124‘, fit: BoxFit.cover, //color: Colors.lightBlue, //colorBlendMode: BlendMode.darken, //图片混合模式(colorBlendMode)和color属性配合使用 ), width: 300.0, height: 200.0, color: Colors.lightGreen, ) ),
列表使用
body: new ListView( children: <Widget>[ /*new Image.network( ‘https://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png‘), new Image.network( ‘https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png‘), */ //图片列表使用 new ListTile( leading: new Icon( Icons.perm_camera_mic, ), title: new Text(‘perm_camera_mic‘), ), new ListTile( leading: new Icon( Icons.perm_phone_msg, ), title: new Text(‘perm_phone_msg‘), ), ], ),
横向列表:ListView组件里加一个scrollDirection属性
body: new Center( child: new Container( height: 200.0, child: new ListView( scrollDirection: Axis.horizontal, //Axis.vertical:纵向列表 children: <Widget>[ new Container( width: 230.0, color: Colors.lightBlue, ), new Container( width: 230.0, color: Colors.lightGreen, ), ], ))),
Dart语言List的声明方式:
import ‘package:flutter/material.dart‘; void main() => runApp(MyApp(items: List<String>.generate(1000, (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 Dome‘, home: new Scaffold( appBar: new AppBar(title: new Text(‘ListView Widget‘)), body: new ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return new ListTile( title: new Text(‘${items[index]}‘), ); }), ), ); } }
常用属性:
body: GridView.count( padding: EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text(‘I am j.y.d‘), const Text(‘I love flutter‘), const Text(‘jyd0124.com‘), const Text(‘2020/02/06‘), const Text(‘Come on,China!‘), const Text(‘Come on,Wuhan!‘), ], ),
官方已经不鼓励使用这种方法,另一种写法为
body: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2.0, crossAxisSpacing: 2.0, childAspectRatio: 0.75, ), children: <Widget>[ new Image.network(‘http://img5.mtime.cn/mg/2019/10/02/105324.67493314_170X256X4.jpg‘,fit:BoxFit.cover), new Image.network(‘http://img5.mtime.cn/mg/2019/09/26/092514.83698073_170X256X4.jpg‘,fit:BoxFit.cover), new Image.network(‘http://img5.mtime.cn/mg/2019/11/07/111316.10093613_170X256X4.jpg‘,fit:BoxFit.cover), new Image.network(‘http://img5.mtime.cn/mg/2019/12/13/094432.64997517_170X256X4.jpg‘,fit:BoxFit.cover), new Image.network(‘http://img31.mtime.cn/mt/2014/02/22/230757.74994253_220X124X4.jpg‘,fit:BoxFit.cover), new Image.network(‘http://img5.mtime.cn/mg/2019/07/10/164947.40820910_170X256X4.jpg‘,fit:BoxFit.cover), ], ),
至此,使用组件的学习就到这儿了,下篇我们将学习布局的相关知识!
标签:file height context main turn 图片 generate caff 一个
原文地址:https://www.cnblogs.com/jyd0124/p/widget.html