radio 水平布局和取消选中

• 1 水平布局

WeChat27a9ec42b5edbd13f928f9f677f1dbe8.jpg

如图所示: 尽管我对两个控件整体进行了水平居中的布局,但是蓝色和棕色的明显的能看出不在一条线上.尤其是对蓝色设置height: 180rpx, 你会惊讶的发现:

WechatIMG306.jpg

我去,什么鬼,为什么没有居中; 这时你去代码中查看,你会发现在radio的外面包裹着一层Lable, 其作用是为了点击后面Text 文字是也能同时响应点击事件;

但是如何才能实现水平居中了:

WechatIMG307.jpg

就是对 Lable 进行布局:

.radio-lable {
      background-color: aquamarine;
      height: 180rpx;
      display: flex;
      align-items: center;   // 水平居中
 }

• 2 如何取消选中

radio如何实现取消选中