uniapp怎么设置一排四个radio

uni-app是一种使用Vue.js开发所有前端应用的框架，可以编译到iOS、Android、H5、以及各种小程序等多个平台。要在uni-app中设置一排四个单选框（radio），你可以使用`<radio-group>`组件来创建一组单选框，并通过`<radio>`组件来添加每个单选框选项。为了实现一排四个的布局，你可以使用CSS样式来控制排列。

下面是一个简单的例子：

<template>
  <view class="radio-group-container">
    <radio-group class="radio-group" v-model="radioValue">
      <label class="radio-label" v-for="(item, index) in radioOptions" :key="index">
        <radio :value="item.value" class="radio" />
        <text>{{ item.text }}</text>
      </label>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radioValue: '', // 当前选中的值
      radioOptions: [
        { text: '选项1', value: '1' },
        { text: '选项2', value: '2' },
        { text: '选项3', value: '3' },
        { text: '选项4', value: '4' }
      ]
    };
  }
};
</script>

<style>
.radio-group-container {
  display: flex;
  flex-direction: row;
}

.radio-group {
  display: flex;
}

.radio-label {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 控制选项之间的间距 */
}

.radio {
  margin-right: 5px;
}
</style>

在这个例子中，我们使用了flex布局来实现一行显示四个单选框。`radio-group-container`类用于包裹整个单选框组，`radio-group`类用于包裹所有的`<label>`标签，使得它们能够作为一个单选组。每个`<label>`通过`v-for`指令循环生成单选框，并通过`radio-label`类来控制布局。`radio`类用于设置单选框本身的样式，`radio-label`类用于设置单选框和文本的水平对齐以及间距。