Flutter布局之tabbar

原文链接

教程推荐

效果图

代码

    // 分析 1
    Column buildButtonColumn(IconData icon, String label) {
      Color color = Colors.red;
      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: color),
          new Container(  //分析 2
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          ),
        ],
      );
    }

    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,  //分析 3
        children: [
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );

分析

• 分析1: 封装每一个按钮，包括图标和文字

• 分析2 margin+文字

• 分析3 MainAxisAlignment.spaceEvenly 代表平分空间