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
网友评论