flutter Row

  • Row的基本属性

    children:传入子组件的数组
    mainAxisAlignment: 子组件在水平方向上的对齐方式
    crossAxisAlignment:子组件在纵轴方向上的对齐方式
    textDirection:布局顺序,一般情况从左到右
    mainAxisSize:max,表示尽可能多的占用水平方向上的位置,min则反之
    
MainAxisAlignment.spaceEvenly
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceBetween
  • 例子
 Row(
        mainAxisAlignment: MainAxisAlignment.center,
        textDirection: TextDirection.rtl,
        children: [
          Container(
            width: 100,
            height: 100,
            color: Colors.red,
            alignment: Alignment.center,
            child: Text("A", style: TextStyle(fontSize: 24, color: Colors.white), textDirection: TextDirection.ltr,),
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: Text("B", style: TextStyle(fontSize: 24, color: Colors.white), textDirection: TextDirection.ltr,),
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
            child: Text("C", style: TextStyle(fontSize: 24, color: Colors.white), textDirection: TextDirection.ltr,),
          ),
        ],
      ),

你可能感兴趣的:(flutter Row)