本文介绍了基于React的问卷编辑器UI设计与实现方案。采用Flex弹性布局，将界面分为上下结构：顶部标题栏和主体内容区。主体内容区采用左中右三栏布局，其中中间画布区域利用绝对定位实现居中显示，并帮助Y轴滚动。文章提供了核心TSX代码和SCSS样式配置，实现了响应式布局和画布居中效果，最终呈现出一个简洁专业的问卷编辑界面。项目源码已开源在Gitee和GitHub平台，便于开发者参

文章目录

• • 1 设计UI，组件拆分
  • 2 实现
  • 关于

1 设计UI，组件拆分

编辑器整体如上图所示，重点关注：

• flex弹性布局
  • 上
    • 左
    • 中
    • 右
  • 下
    • 左
    • 中
    • 右
• 画布居中
• 画布Y轴滚动

2 实现

src/pages/question/Edit/index.tsx代码如下：

import {
FC
} from "react";
import useLoadQuestionData from "@/hooks/useLoadQuestionData";
import styles from "./index.module.scss";
const Edit: FC = () =>
{
// 获取问卷信息
const { loading
} = useLoadQuestionData();
return (
<div className={styles.container
}>
<div style={
{ backgroundColor: "#fff", height: "40px"
}
}>Header<
/div>
<div className={styles["content-wrapper"]
}>
<div className={styles.content
}>
<div className={styles.left
}>Left<
/div>
<div className={styles.main
}>
<div className={styles["canvas-wrapper"]
}>
<
/div>
<
/div>
<div className={styles.right
}>Right<
/div>
<
/div>
<
/div>
<
/div>
);
};
export default Edit;

src/pages/question/Edit/index.module.scss代码如下：

.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f0f2f5;
}
.content-wrapper {
flex: auto;
padding: 12px 0;
}
.content {
display: flex;
margin: 0 24px;
height: 100%;
.left {
width: 285px;
background-color: #fff;
padding: 0 12px;
}
.main {
flex: 1;
position: relative;
overflow: hidden;
.canvas-wrapper {
position: absolute;
width: 400px;
height: 712px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: auto;
box-shadow: 0 2px 10px #00001f;
}
}
.right {
width: 300px;
background-color: #fff;
padding: 0 12px;
}
}

效果如下图所示：

关于

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]react官网[CP/OL].

[2]Redux官网[CP/OL].