flutter-常见的基础组件（一）

flutter

　　1.Text 文本组件　

Text(
      'czklove', //文本上的文字
      style: TextStyle( 
        // style 代表对文字的描述
        fontSize: 18, //文字的大小
        fontWeight: FontWeight.bold, //文字的粗细
        fontFamily: "" //和html 上的一样
      ),
      maxLines: 1, // 文本最多显示行数
      overflow: TextOverflow.ellipsis, //超出的文本处理方式，裁剪or隐藏
      textAlign: TextAlign.right //要配合center组件使用
    );

　　2 center 组件

Center(
      child: Text('czklove'),
      widthFactor: 2, //宽度系数
      heightFactor: 2, //高度系数
    );

　　3 Container 容器组件

return Container(
      width: 200, // 宽度
      height: 300, //高度
      color: Colors.pink, //背景颜色 会填充padding
      child: Text('czklove'), //子组件
      alignment: Alignment.bottomCenter, //内部子组件对其方式
      padding: EdgeInsets.all(10), // padding 包括在width 里
      margin: EdgeInsets.all(15),
    );

　　4.Row和Column 行组件和列组件 Row行组件，一行排列， Column 列组件，多列排列，单行只有一个元素

Container(child:Homecontent(),height: 300,)

class Homecontent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row( //默认高度沾满整个父容器 宽度自适应
      children: <Widget>[
        Text('czklvoe'),
        Container(
          height: 300,
          child: Text('czklove-Container'),
          color: Colors.pink,
        ),
        Center(child: Text('czklove-center'))
      ],
      mainAxisAlignment: MainAxisAlignment.end, //主轴上右对齐
      crossAxisAlignment:CrossAxisAlignment.start // 负轴上上对其
    );
  }
}

class Homecontent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column( //默认高度沾满整个父容器 宽度自适应
      children: <Widget>[
        Text('czklvoe'),
        Container(
          height: 230,
          child: Text('czklove-Container'),
          color: Colors.pink,
        ),
        Center(child: Text('czklove-center'))
      ],
      mainAxisAlignment: MainAxisAlignment.end, //主轴上右对齐
      crossAxisAlignment:CrossAxisAlignment.start // 负轴上上对其
    );
  }
}

　　5.Image 图片组件分远程图片和本地图片（注本地图片配置特别麻烦，这里只写远程图片展示）

return Image.network(
      'http://p3.music.126.net/g5MsN6NwYPHBKtiMaDG8_g==/109951163069746537.jpg?param=200y200',//远程图片地址
      fit: BoxFit.cover,// 填充完 默认按源大小展示
      width: 200,
      height: 200, //写了填充宽高基本上就没用了
    );

　　图片裁剪 CircleAvatar默认是裁剪成圆

Container(child:Homecontent(),width: 300,height: 300,)

class Homecontent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return CircleAvatar(
      backgroundImage: NetworkImage(
        'http://p3.music.126.net/g5MsN6NwYPHBKtiMaDG8_g==/109951163069746537.jpg?param=200y200',
      ),
    );
  }
}

　　6.Icon 组件，图标组件

 Icon(
      Icons.home, // 图标类型
      color: Colors.pink, // 图标颜色
      size: 36 // 图标大小
    );

　　7.listview 列表组件 listtile 标题组件

ListView(
      children: <Widget>[
        ListTile(
          title: Text('czlove'), //大标题
          subtitle: Text('czlove1111111111'), //副标题
          leading: Icon(Icons.home,size: 36), //左侧图标
        )
      ],
    );

　　8. Appbar 顶部应用程序栏组件

 appBar: AppBar(
        leading: Icon(Icons.keyboard_arrow_left), // <  图标
        title: Text('czklove'),
        actions: [ //右上角列表
          Text('czcz'),
          Text('zxczzxc')
        ],
        flexibleSpace: Text('flexibleSpace'), //最左上角
        centerTitle: true //标题是否居中
      ),

flutter-常见的基础组件（一）

猜你喜欢