flutter学习笔记二布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/**
 * 第五节,卡片布局
 */
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    var card =new Card(
      child:Column(
        children: <Widget>[
          ListTile(
            title:Text('吉林省吉林市昌邑区',style:TextStyle(fontWeight:FontWeight.w500 )),//标题
            subtitle:Text('技术胖：123456789'),//副标题
            leading:new Icon(Icons.account_box,color:Colors.lightBlue)//图标
          ),
          new Divider(),//分割线
          ListTile(
            title:Text('吉林省吉林市昌邑区',style:TextStyle(fontWeight:FontWeight.w500 )),//标题
            subtitle:Text('技术胖：123456789'),//副标题
            leading:new Icon(Icons.account_box,color:Colors.lightBlue)//图标
          ),
          new Divider(),
          ListTile(
            title:Text('吉林省吉林市昌邑区',style:TextStyle(fontWeight:FontWeight.w500 )),//标题
            subtitle:Text('技术胖：123456789'),//副标题
            leading:new Icon(Icons.account_box,color:Colors.lightBlue)//图标
          ),
          new Divider(),
          ListTile(
            title:Text('吉林省吉林市昌邑区',style:TextStyle(fontWeight:FontWeight.w500 )),//标题
            subtitle:Text('技术胖：123456789'),//副标题
            leading:new Icon(Icons.account_box,color:Colors.lightBlue)//图标
          ),
          new Divider(),
        ],
      )
    );
    return MaterialApp(
      title:'我家养生',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('层叠布局'),
        ),
        body:new Container(
          child: card,
        )
      )
    );
  }
}

/**
 * 第四节,positioned布局
 */
// class MyApp extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     var stack = new Stack(
//       alignment: const FractionalOffset(0.5, 0.8),//两个组件层叠布局
//       children:<Widget>[
//         new CircleAvatar(//头像图组件
//           backgroundImage:new NetworkImage('http://175.24.55.115/group1/M00/00/00/rBEAB15-55CAFSi-AACHuaXA5AY074_big.png'),
//           radius: 100,
//         ),
//         new Positioned(
//           top:20,
//           left:50,
//           child:new Text(
//             'JSPang.com',
//             style: TextStyle(
//               color: Colors.white
//             )
//             ),
//         )
//       ]
//     ); 
//     return MaterialApp(
//       title:'我家养生',
//       home:Scaffold(
//         appBar:new AppBar(
//           title:new Text('层叠布局'),
//         ),
//         body:Center(
//           child:stack,
//         )
//       )
//     );
//   }
// }

/**
 * 第三节,层叠布局
 */
// class MyApp extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     var stack = new Stack(
//       alignment: const FractionalOffset(0.5, 0.8),//两个组件层叠布局
//       children:<Widget>[
//         new CircleAvatar(//头像图组件
//           backgroundImage:new NetworkImage('http://175.24.55.115/group1/M00/00/00/rBEAB15-55CAFSi-AACHuaXA5AY074_big.png'),
//           radius: 100,
//         ),
//         new Container(//容器组件
//           decoration: new BoxDecoration(
//             color:Colors.lightBlue,
//           ),
//           padding: EdgeInsets.all(5),
//           child:Text('我家养生')
//         ),
//       ]
//     ); 
//     return MaterialApp(
//       title:'我家养生',
//       home:Scaffold(
//         appBar:new AppBar(
//           title:new Text('层叠布局'),
//         ),
//         body:Center(
//           child:stack,
//         )
//       )
//     );
//   }
// }


/**
 * 第二节，文本的垂直布局
 */
// class MyApp extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     return MaterialApp(
//       title:'JSPang',
//       home:Scaffold(
//         appBar:new AppBar(
//           title:new Text('垂直方向布局'),
//         ),
//         body: Center(child:new Column( // Column 垂直布局
//           crossAxisAlignment: CrossAxisAlignment.center,
//           mainAxisAlignment: MainAxisAlignment.center,//垂直布局下主轴是垂直方向
//           children: <Widget>[
//           Text('I am JS'),
//           Expanded(child: Text('I am JSPang')) ,//灵活布局，填充多余空白
//           Text('I am Pang')
//           ],
//         ) ,) 
//       )
//     );
//   }
// }


/**
 * 第一节，按钮的水平布局
 */
// class MyApp extends StatelessWidget{
//   @override
//   Widget build(BuildContext context){
//     return MaterialApp(
//       title:'JSPang',
//       home:Scaffold(
//         appBar:new AppBar(
//           title:new Text('水平方向布局'),
//         ),
//         body:new Row( //Row 水平布局
//           children: <Widget>[
//            new RaisedButton(//不灵活布局
//               onPressed: (){},
//               color:Colors.redAccent,
//               child:new Text('Red Button')
//             ),
//             Expanded(child:new RaisedButton(//Expanded灵活布局，填充多余空白
//               onPressed: (){},
//               color:Colors.orangeAccent,
//               child:new Text('orange Button')
//             )),
//             new RaisedButton(//不灵活布局
//               onPressed: (){},
//               color:Colors.blueAccent,
//               child:new Text('blue Button')
//             ),
//           ],
//         )
//       )
//     );
//   }
// }
flutter学习笔记二 布局

相关推荐
