1. 文本組件Text主要屬性及用法

Text(
          '文本案例文本案例文本案例文本案例',
          style: TextStyle(
              fontSize: 18,
              color: Colors.green,
              decoration: TextDecoration.underline,//下劃線,刪除線
              fontWeight:FontWeight.bold,//字體粗度
          ),
          maxLines: 1,//最大行數(shù)
          textAlign: TextAlign.left,   //相對于父布局的對齊方式
          textDirection: TextDirection.rtl,       //文本開始方向,有的語言是從右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式顯示
          textScaleFactor:3,//文本的縮放比例
        ),

2 容器組件的屬性及用法

Container(
        width: 200,
        height: 200,
//        color: Colors.black12,//設(shè)置了decoration就不能設(shè)置color,否著會(huì)報(bào)錯(cuò)
        margin: EdgeInsets.all(20),//margin值,外部值
        padding: EdgeInsets.all(20),//padding值,自身內(nèi)部
        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)//環(huán)形漸變
//        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,//最大行數(shù)
          textAlign: TextAlign.left,   //相對于父布局的對齊方式
          textDirection: TextDirection.rtl,       //文本開始方向,有的語言是從右自左的,
          softWrap: true,
          overflow: TextOverflow.ellipsis,//超出部分以什么方式顯示
            textScaleFactor:3,//文本的縮放比例
        ),
      ),

代碼實(shí)現(xiàn)效果

容器組件包含一個(gè)子widget,自身具備alignment,padding等基礎(chǔ)屬性,而其他的基礎(chǔ)組件并不具備這些屬性,我實(shí)際使用當(dāng)中,我們都是使用容器組件對基礎(chǔ)組件進(jìn)行包裹.

3.滑動(dòng)布局

3.1 ListView

class _ListViewTestState extends State<ListViewTest> {
  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(
        //每個(gè)item的構(gòu)造器
          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

/**
 * 網(wǎng)格布局
 */
class GridViewDemo extends StatelessWidget {
  // 自行設(shè)置
  final List<String> letters = ["自行加載數(shù)據(jù)" ];

  // 用于區(qū)分網(wǎng)格單元
  final List<Color> 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(
            //列數(shù)
              crossAxisCount: 3,
              //橫軸間距
              crossAxisSpacing: 10,
              //數(shù)軸間距
              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))
          }),
    );
  }
}