Flutter ③《线性布局-Row》

Row

一个可以水平方向展示组件集合的组件，该组件的属性几乎和上一篇是一样的，我们直接看下用法。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '第一个程序',
      home: Scaffold(
          appBar: AppBar(
            title: Text("第一个程序"),
          ),
          body: Row(
            children: <Widget>[
              Expanded(
                child: Text('你 过来啊！', textAlign: TextAlign.center),
              ),
              Expanded(
                child: Text('不 我就在这', textAlign: TextAlign.center),
              ),
              Expanded(
                child: FittedBox(
                  fit: BoxFit.contain, // otherwise the logo will be tiny
                  child: const FlutterLogo(),
                ),
              ),
            ],
          )),
    );
  }
}

效果如下

图片.png

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '第一个程序',
      home: Scaffold(
          appBar: AppBar(
            title: Text("第一个程序"),
          ),
          body: Row(
            children: <Widget>[
              const FlutterLogo(),
              const 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.'),
              const Icon(Icons.sentiment_very_satisfied),
            ],
          )),
    );
  }
}

图片.png

再看看这个例子，如果Row的子组件不用Expanded或者Flexible组件可能会报错。
如果仅仅有一个子组件可以用Align或者Center来定位
Flutter会提示“OVERFLOWED” 表示你的布局超出屏幕，主要是由于没有添加限定导致的

我们修改一下Row

 Row(
            children: <Widget>[
              const FlutterLogo(),
              const 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.'),
              ),
              const Icon(Icons.sentiment_very_satisfied),
            ],
          )

运行结果如下：

图片.png