自动调整区域大小以适应屏幕

Posted

技术标签:

【中文标题】自动调整区域大小以适应屏幕【英文标题】:Auto-resize area to fit screen 【发布时间】:2021-10-31 11:57:48 【问题描述】:

我想根据这张图创建一个视觉布局:

代码:

<>
          <Grid
              container
              direction="row"
              justifyContent="flex-start"
              alignItems="flex-start"
          >
              <Grid item>

                  <Grid className=classes1.color
                        container
                        direction="column"
                        justifyContent="flex-start"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=2>
                              item link 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 2
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 3
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=2>
                              item link 4
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className=classes2.color
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=10>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 11
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 13
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 14
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 15
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=10>
                              item 16
                          </Box>
                      </Grid>

                  </Grid>

              </Grid>

              <Grid item>

                  <Grid className=classes3.color
                        container
                        direction="column"
                        justifyContent="space-around"
                        alignItems="center"
                  >
                      <Grid item>
                          <Box m=15>
                              item area 1
                          </Box>
                      </Grid>
                      <Grid item>
                          <Box m=15>
                              item area 2
                          </Box>
                      </Grid>
                  </Grid>

              </Grid>

          </Grid>
      </>

完整代码:

https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx

我无法解决的问题是如何为第二列(第 1-6 项)添加垂直滚动条。 我还想自动调整项目“区域 1”和“项目区域 2”以适应水平区域的其余部分并添加垂直滚动条。

【问题讨论】:

【参考方案1】:

对于在第二列中使用垂直滚动条,您可以将父 &lt;Grid container&gt; 分隔为三个 Grid,然后在中间 &lt;Grid container&gt; 中使用 style= height: "100%", overflow: "auto"

基于 material-ui documentation at "xl""xs" 道具,您可以使用 xs=12 in &lt;Grid item xs=12&gt; 来适应其余部分水平区域

检查这个看起来像你的代码的codesandbox

【讨论】:

我还有一个问题:是否有可能用鼠标调整左右边框的大小,用鼠标拖动mediumvioletred颜色的区域?有时我需要扩展它。 由于某种原因,我收到多个错误,例如 TS2769: No overload matches this call. 这条线 xs=xsGridLeft 我有一个小要求。你能用打字稿给我看同样的例子吗? Material Design 的响应式 UI 基于 12 列网格布局,因此最小宽度 (xs=1) 应为屏幕的 8.33334%。所以我认为可调整大小的网格无法顺利实现,但可抓取的可调整大小组件的想法是相同的。它们都使用 addeventlistener 函数 onmousedown 、 onmouseup 和 onmousemove 并更改组件宽度。可能这个链接可以帮助你。 ***.com/questions/49469834/… 感谢您的回复。一个小小的请求。你能告诉我在 Typescript 中同样的解决方案吗?

以上是关于自动调整区域大小以适应屏幕的主要内容,如果未能解决你的问题,请参考以下文章

css 如何根据显示器屏幕大小自动调整显示区域

有啥办法可以让按钮上的图像自动调整大小以适应屏幕?

css 如何根据显示器屏幕大小自动调整显示区域

无法让 UIImageView 调整大小以适应屏幕

css 如何根据显示器屏幕大小自动调整显示区域

如何调整 UIButton 的大小以适应文本而不使其比屏幕更宽?