第五节 FlutterROW 水平布局

image.png

Flutter中的row控件就是水平控件，它可以让Row里边的子元素进行水平排列。

Row控件可以分为灵活排列和非灵活排列两种，这两种模式都需要熟练掌握，等经验丰富后可根据需求进行使用。

非灵活例子:

import 'package:flutter/material.dart';

class MemberPage extends StatelessWidget {
  const MemberPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'row',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ROW'),
        ),
        body: Row(
          children: <Widget>[
              child: RaisedButton(
                onPressed: () => {},
                color: Colors.orangeAccent,
                child: Text('data2'),
              ),
              child: RaisedButton(
                onPressed: () => {},
                color: Colors.orangeAccent,
                child: Text('data3'),
              ),
             
          ],
        ),
      ),
    );
  }
}

解决上面有空隙的问题，可以使用 Expanded来进行解决，也就是我们说的灵活布局。我们在按钮的外边加入Expanded就可以了，代码如下：

import 'package:flutter/material.dart';

class MemberPage extends StatelessWidget {
  const MemberPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'row',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ROW'),
        ),
        body: Row(
          children: <Widget>[
            Expanded(
              child: RaisedButton(
                onPressed: () => {},
                color: Colors.orangeAccent,
                child: Text('data'),
              ),
            ),
             Expanded(
              child: RaisedButton(
                onPressed: () => {},
                color: Colors.orangeAccent,
                child: Text('data2'),
              ),
            ),
             Expanded(
              child: RaisedButton(
                onPressed: () => {},
                color: Colors.orangeAccent,
                child: Text('data3'),
              ),
            ),
             
          ],
        ),
      ),
    );
  }
}

image.png

column组件下加入下面的代码:

• CrossAxisAlignment.star：居左对齐。
• CrossAxisAlignment.end：居右对齐。
• CrossAxisAlignment.center：居中对齐。

主轴和副轴的辨识
在设置对齐方式的时候你会发现右mainAxisAlignment属性，意思就是主轴对齐方式，那什么是主轴，什么又是幅轴那。

main轴：如果你用column组件，那垂直就是主轴，如果你用Row组件，那水平就是主轴。

cross轴：cross轴我们称为幅轴，是和主轴垂直的方向。比如Row组件，那垂直就是幅轴，Column组件的副轴就是水平方向的。

主轴和幅轴我们搞清楚，才能在实际工作中随心所欲的进行布局。

比如现在我们要把上面的代码，改成垂直方向居中。因为用的是Column组件，所以就是主轴方向，这时候你要用的就是主轴对齐了。

import 'package:flutter/material.dart';

class MemberPage extends StatelessWidget {
  const MemberPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'row',
      home: Scaffold(
          appBar: AppBar(
            title: Text('ROW'),
          ),
          body: Center(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[Text('data'), Text('data2'), Text('data3')],
          ))),
    );
  }
}