Flutter基础组件

1. 文本组件Text主要属性及用法

Text(
          '文本案例文本案例文本案例文本案例',
          style: TextStyle(
              fontSize: 18,
              color: Colors.green,
              decoration: TextDecoration.underline,//下划线,删除线
              fontWeight:FontWeight.bold,//字体粗度
          ),
          maxLines: 1,//最大行数
          textAlign: TextAlign.left,   //相对于父布局的对齐方式
          textDirection: TextDirection.rtl,       //文本开始方向,有的语言是从右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式显示
          textScaleFactor:3,//文本的缩放比例
        ),

2 容器组件的属性及用法

Container(
        width: 200,
        height: 200,
//        color: Colors.black12,//设置了decoration就不能设置color,否着会报错
        margin: EdgeInsets.all(20),//margin值,外部值
        padding: EdgeInsets.all(20),//padding值,自身内部
        alignment: Alignment.center,
        decoration:BoxDecoration(
          color: Colors.white,
          border: new Border.all(
            color: Colors.green,
            width: 4.0,
          ),//
          boxShadow: [BoxShadow(color: Color(0x99FFFF00), offset: Offset(5.0, 5.0),
              blurRadius: 10.0, spreadRadius: 2.0), BoxShadow(color: Color(0x9900FF00),
              offset: Offset(1.0, 1.0)), BoxShadow(color: Color(0xFF0000FF))],//四边的阴影值
          borderRadius: const BorderRadius.all(const Radius.circular(20)),//圆角弧度
//          gradient: RadialGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)],radius: 1, tileMode: TileMode.mirror)//环形渐变
//        gradient: SweepGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], startAngle: 0.0, endAngle: 1*3.14) //扫描式渐变
        gradient: LinearGradient(colors: [Color(0xFFFFFF00), Color(0xFF00FF00), Color(0xFF00FFFF)], begin: FractionalOffset(1, 0), end: FractionalOffset(0, 1))// 线性渐变

        ),
        transform: new Matrix4.rotationZ(0.3),//变换矩阵
        child: Text(
          '文本案例',
          style: TextStyle(
              fontSize: 12,
              color: Colors.green,
              decoration: TextDecoration.underline,//下划线,删除线
              fontWeight:FontWeight.bold,//字体粗度
          ),
          maxLines: 1,//最大行数
          textAlign: TextAlign.left,   //相对于父布局的对齐方式
          textDirection: TextDirection.rtl,       //文本开始方向,有的语言是从右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式显示
            textScaleFactor:3,//文本的缩放比例
        ),
      ),

代码实现效果

容器组件包含一个子widget,自身具备alignment,padding等基础属性,而其他的基础组件并不具备这些属性,我实际使用当中,我们都是使用容器组件对基础组件进行包裹.

3.滑动布局

3.1 ListView

class _ListViewTestState extends State {
  ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    _scrollController.addListener(() {});
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Widget divider1 = Divider(
      color: Colors.blue,
    );
    Widget divider2 = Divider(color: Colors.green);
    return Scaffold(
      appBar: AppBar(
        title: Text('listview demo'),
      ),
      body: ListView.separated(
        //每个item的构造器
          itemBuilder: (BuildContext context, int index) {
            return ListTile(title: Text('listview demo== $index'));
          },
          //分割器
          separatorBuilder: (BuildContext context, int index) {
            return index % 2 == 0 ? divider1 : divider2;
          },
          itemCount: 50),
    );
  }
}

3.2 GridView

/**
 * 网格布局
 */
class GridViewDemo extends StatelessWidget {
  // 自行设置
  final List letters = ["自行加载数据" ];

  // 用于区分网格单元
  final List colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.pink
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView Demo'),
      ),
      body: GridView.builder(
          scrollDirection: Axis.vertical,
          padding: const EdgeInsets.all(10.0),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //列数
              crossAxisCount: 3,
              //横轴间距
              crossAxisSpacing: 10,
              //数轴间距
              mainAxisSpacing: 10,
              //子widget的宽高比
              childAspectRatio: 1),
          itemCount: letters.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: (){
                 print(index);
              },
                child: Container(
                    color: colors[index % 4],
                    child: Text(letters[index]),
                    alignment: Alignment.center))
          }),
    );
  }
}