美文网首页
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