Flutter基础组建使用- Row

Row也是Flutter中常用的组件

属性介绍以及使用

children : 子元素

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.cyanAccent,
        child: Row(
          children:[
            Container(
             width: 120,
             height: 120,
             color: Colors.red,
            ),
           Container(
           width: 120,
           height: 120,
           color: Colors.deepPurple,
            ),
          ],
        ),
      ),
    );
  }

mainAxisAlignment:横向排列方式

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.cyanAccent,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: widgets,
          mainAxisSize: MainAxisSize.max,
        ),
      ),
    );
  }

MainAxisAlignment.start(默认)

MainAxisAlignment.center

MainAxisAlignment.spaceAround

MainAxisAlignment.spaceBetween

MainAxisAlignment.spaceEvenly 类似于spaceAround

mainAxisSize 当前行撑开的宽度默认为MainAxisSize.max

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.cyanAccent,
        child: Row(
          // mainAxisAlignment: MainAxisAlignment.center,
          children: widgets,
          mainAxisSize: MainAxisSize.max,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: switchWidget,
        child: Icon(Icons.undo),
      ),
    );
  }

MainAxisSize.max(对比背景色即可发现区别)

MainAxisSize.min

crossAxisAlignment 纵向排列方式(*外部容器需要指定宽高)

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: 500,
          color: Colors.cyanAccent,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: widgets,
            mainAxisSize: MainAxisSize.min,
          ),
        ),
      ),
    );
  }

CrossAxisAlignment.start

CrossAxisAlignment.center

CrossAxisAlignment.end

CrossAxisAlignment.stretch

CrossAxisAlignment.baseline(设置该属性时必须配合textBaseline属性)