一个Web前端的flutter学习笔记（二）

常用的布局组件

ListView 

ListView(
    children: [
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
                fit: BoxFit.cover,
        ),
        ListTile(
            leading: Image.asset(
                'assets/images/avatar.jpeg',
                height: 30.0,
                fit: BoxFit.cover,
                alignment: Alignment.center
            ),
            title: Text(
                username,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
            ),
            subtitle: Text(phone),
                trailing: Icon(
                Icons.phone_in_talk,
                color: Colors.blueAccent,
            ),
            enabled: true, // 是否禁用
            selected: false, // 是否选中状态
            onTap: () => print('onTap'), // 点击事件
            onLongPress: () => print('onLongPress'), // 长按事件
        ),
        ListTile(
            leading: Icon(Icons.payment),
            title: Text(card),
        ),
        ListTile(
            leading: Icon(Icons.attach_money),
            title: Text(money),
        )
   ],
),

GridView

GridView(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        mainAxisSpacing: 2.0, // 纵轴网格间距
        crossAxisSpacing: 2.0, // 横向网格间距
        crossAxisCount: 3, // 每行显示的列数
        childAspectRatio: 1.0, // 宽高比
    ),
    padding: EdgeInsets.all(10.0),
    children: [
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
            fit: BoxFit.cover,
        ),
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
            fit: BoxFit.cover,
        ),
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
            fit: BoxFit.cover,
        ),
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
            fit: BoxFit.cover,
        ),
        Image.asset(
            'assets/images/person_back.jpg',
            height: 100.0,
            fit: BoxFit.cover,
        ),
            
    ],
),

Row

Row(
    children: [
        RaisedButton(
            child: Text('按钮一'),
            color: Colors.red,
        ),
        Expanded( // 自适应容器
            child: RaisedButton(
                child: Text('按钮二'),
                color: Colors.green,
            ),
        ),
        RaisedButton(
            child: Text('按钮三'),
            color: Colors.blue,
        ),
    ],
),