flutter widget---->Spacer的使用
如果你想灵活控制Flex容器(Row, Column)中子组件中的间隔,可以考虑使用Spacer。下面以Row为例子,来为它的子组件添加间距。
use Spacer
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Row(
children: <Widget>[
FlutterLogo(colors: Colors.blue),
Spacer(flex: 2),
FlutterLogo(colors: Colors.pink),
Spacer(flex: 4),
FlutterLogo(colors: Colors.green),
Spacer(),
FlutterLogo(colors: Colors.pink),
],
),
),
),
);
}
}
the result:
use Row mainAxisAlignment
- spacebetween
- spaceAround
- spaceEvenly
Summary
Row(
children: <Widget>[
FlutterLogo(colors: Colors.blue),
Spacer(),
FlutterLogo(colors: Colors.pink),
Spacer(),
FlutterLogo(colors: Colors.green),
Spacer(),
FlutterLogo(colors: Colors.pink),
],
)
与mainAxisAlignment=spacebetween的效果一样。但是使用Spacer可以提供更高的灵活性去设置组件之间的间距。Spacer的源码其实就是一个空的Expanded组件。
class Spacer extends StatelessWidget {
const Spacer({Key key, this.flex = 1})
: assert(flex != null),
assert(flex > 0),
super(key: key);
final int flex;
@override
Widget build(BuildContext context) {
return Expanded(
flex: flex,
child: const SizedBox.shrink(),
);
}
}
作者:
huhx
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
出处: www.cnblogs.com/huhx
格言:你尽力了,才有资格说自己的运气不好。
版权:本文版权归作者huhx和博客园共有,欢迎转载。未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。