美文网首页
Flutter入门

Flutter入门

作者: 李永开 | 来源:发表于2020-07-11 21:44 被阅读0次

一.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]}')
              );
            },
          )
        )
      );
  }
}

五.网格列表

相关文章

网友评论

      本文标题:Flutter入门

      本文链接:https://www.haomeiwen.com/subject/skdecktx.html