主要是利用DecoratedBoxdecoration属性:

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        FlatButton(
          child: Text('打开'),
        ),
        //垂直分割线
        SizedBox(
          width: 1,
          height: 12,
          child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.grey),
          ),
        ),
        FlatButton(
          child: Text('关闭'),
        )
      ],
    );

或者更简单的,直接使用VerticalDivider

VerticalDivider(
                        color: Colors.grey,
                        width: 1,
                      )

效果图:
在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐