Flutter-线性布局

配图来自网络，如侵必删

在日常的开发中，线性布局是最常的布局方式。Flutter当中线性布局主要有Row和Column两种。这篇博客来分享Row和Column相关的知识，希望对文章的小伙伴有所帮助。

示例代码

分享一下，我同时使用Row和Column的代码：

 Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              buildItem('横一', Colors.redAccent),
              buildItem('横二', Colors.orangeAccent),
              buildItem('横三', Colors.yellowAccent)
            ],
          ),
          const Padding(padding: EdgeInsets.all(8)),
          Column(
            children: <Widget>[
              buildItem('纵一', Colors.redAccent),
              buildItem('纵二', Colors.orangeAccent),
              buildItem('纵三', Colors.yellowAccent)
            ],
          )
        ],
      ),

实现思路是：用一个Column包裹使用Row和Column。Item的代码：

buildItem(String content, Color backgroundColor) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      color: backgroundColor,
      child: Text(content),
    );
  }

代码运行效果：

image.png

完整代码

完整的示例代码，感兴趣的小伙伴可以复制到自己的编译器当中修改。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '线性布局Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              buildItem('横一', Colors.redAccent),
              buildItem('横二', Colors.orangeAccent),
              buildItem('横三', Colors.yellowAccent)
            ],
          ),
          const Padding(padding: EdgeInsets.all(8)),
          Column(
            children: <Widget>[
              buildItem('纵一', Colors.redAccent),
              buildItem('纵二', Colors.orangeAccent),
              buildItem('纵三', Colors.yellowAccent)
            ],
          )
        ],
      ),
    );
  }

  buildItem(String content, Color backgroundColor) {
    return Container(
      width: 100,
      height: 100,
      alignment: Alignment.center,
      color: backgroundColor,
      child: Text(content),
    );
  }
}

Column

Column是垂直布局，可以实现的布局的从上往下。源码：

Column({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

Row

Row是水平布局，可以实现的布局的从左往右。源码：

Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );