全屏浏览
缩小浏览
回到页首

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:

image-20200629105201593

use Row mainAxisAlignment

  • spacebetween

image-20200629105405861

  • spaceAround

image-20200629105448180

  • spaceEvenly

image-20200629105531515

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(),
    );
  }
}

posted @ 2020-06-29 11:07  huhx  阅读(36)  评论(0编辑  收藏  举报