2020-01-10

import 'package:flutter/material.dart';

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

class ChipWidget extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: "Flutter",

      home: Scaffold(

        appBar: AppBar(

          title: Text("流式布局示例"),

        ),

        body: Padding(

          padding: EdgeInsets.all(20.0),

          child: Wrap(

            direction: Axis.horizontal, //主轴的方向

            spacing: 8.0, // 主轴方向的间距

            runSpacing: 12.0, // 交叉轴方向的间距

            children: [

              Chip(//1

                avatar: CircleAvatar(

                    backgroundColor: Colors.blue, child: Text('1')),

                label: Text('Android进阶之光'),

              ),

              Chip(

                avatar: CircleAvatar(

                    backgroundColor: Colors.blue, child: Text('2')),

                label: Text('Android进阶解密'),

              ),

              Chip(

                avatar: CircleAvatar(

                    backgroundColor: Colors.blue, child: Text('3')),

                label: Text('Android进阶？'),

              ),

            ],

          ),

        ),

      ),

    );

  }

}