第二章●第八节：行（Row）

用于在水平位置显示子项的组件。若子项要填充水平空间，需要将子项置于Expanded组件（用于扩展Row、Column或Flex子项的组件）中。

行组件是不能滚动的（通常将行中溢出的子项视为错误的）。如果需要设置组件在没有足够空间滚动，考虑使用ListView。

官方示例将水平位置划分为三块，前两个放置文本信息，后一个放置Flutter logo。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Row组件"),
        ),
        body: Row(
          children: <Widget>[
            Expanded(
              child: Text(
                "Deliver features faster",
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              child: Text(
                "Craft beautiful UIs",
                textAlign: TextAlign.center,
              ),
            ),
            Expanded(
              child: FittedBox(
                fit: BoxFit.contain,
                child: FlutterLogo(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Row

为什么我们的行有黄色和黑色警告条纹？

如果行的内容比行的本身宽，则说明该行溢出。当行溢出时，该行没有任何剩余空间在Expanded和Flexible子组件之间共享。该行通过在溢出的边缘上绘制黄色和黑色条纹警告框来提示此情况。如果行外侧有空间，则溢出以红色字体打印。

import 'package:flutter/material.dart';

void main() => runApp(YellowRowTip());

class YellowRowTip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Row组件"),
        ),
        body: Row(
          children: <Widget>[
            FlutterLogo(),
            Text("Flutter\'s hot reload helps you quickly and easily experiment,build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android."),
            Icon(Icons.sentiment_very_satisfied)
          ],
        ),
      ),
    );
  }
}

Row

解决方案，对第二个超出范围的组件使用Expanded包装。

Row(
  children: <Widget>[
    FlutterLogo(),
    Expanded(
      child: Text("Flutter\'s hot reload helps you quickly and easily experiment,build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android."),
    ),
    Icon(Icons.sentiment_very_satisfied)
  ],
),

Row

Row属性

Row属性

本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。

---

总目录结构