使 React AppBar 和 SplitPane 适合没有滚动条答案

【问题标题】：Make React AppBar and SplitPane fit without scrollbar使 React AppBar 和 SplitPane 适合没有滚动条
【发布时间】：2019-11-30 00:39:59
【问题描述】：

我正在制作一个 React 页面，其顶部有一个 AppBar，下方有一个 SplitPane，以便用户可以编辑和预览内容并调整大小。问题是 SplitPane 似乎在调整自身的大小，就好像 AppBar 不存在一样，这使 UI 非常混乱：SplitPane 中的两个窗格都是可滚动的，然后根视图也是可滚动的。我只希望窗格可以滚动。

我用 react-split-pane 和 react-splitter-layout 都试过了，但我都遇到了这个问题。（实际上我更喜欢 react-splitter-layout，因为它开箱即用，看起来不错，但我看到 react-split-pane 使用更广泛。我怀疑一个修复程序也适用于另一个。）

我尝试使用 CSS 将 SplitPane 及其父级的高度设置为 calc(100% - ${appBarHeight}px)（基于 Material UI 执行 Drawer 的方式），但没有成功。我试过用各种 CSS（设置高度、弹性、显示）和 Material UI 的 Box 将它包装在 div 中，但到目前为止没有任何效果。

我能够通过将 AppBar 放入其中一个窗格来破解解决方案，但这显然是一个糟糕的选择，因为窗格只是众多屏幕之一，我不想到处复制它。

这是一个简单的例子，展示了我遇到的问题：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import SplitPane from 'react-split-pane';

function App() {
  return (
    <div className="App">
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            Photos
          </Typography>
        </Toolbar>
      </AppBar>
      <SplitPane>
         <div>A</div>
         <div>B</div>
      </SplitPane>
    </div>
  );
}

export default App;

所以我对上面的期望是最终得到一个标题为“照片”的页面，一个带有“A”的垂直窗格，一个带有“B”的垂直窗格，并且没有滚动条，因为内容很短.相反，整个页面都会显示一个滚动条，您可以向下滚动 AppBar 的高度。我该如何解决这个问题？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您需要将SplitPane 放在AppBar 内一个具有“相对”位置的元素内。这在 react-split-pane 的 maxSize section of the documentation 中有描述。

function App() {
  return (
    <div className="App">
      <AppBar position="static" color="default">
        <Toolbar>
          <Typography variant="h6" color="inherit">
            Photos
          </Typography>
        </Toolbar>
        <main style={{ position: "relative" }}>
         <SplitPane>
           <div style={{ padding: "0 2rem" }}>
             A
           </div>
           <div style={{ padding: "0 2rem" }}>
             B
           </div>
         </SplitPane>
        </main>
      </AppBar>
    </div>
  );
}

【讨论】：

谢谢。短期内没时间测试这个，但是下次在项目中需要这个的时候我会尝试一下
我现在刚刚尝试过，但没有成功。我承认我不理解您链接到的文档部分。我知道我的方法是错误的，但它是针对个人项目的，而且破解是有效的，所以我不会浪费时间弄清楚为什么这不起作用。

【解决方案2】：

我想出了一个技巧来完成这项工作，并认为我应该分享给下一个遇到此问题的人。

基本上，这个想法是在 AppBar 的边界处用一个不可移动的窗格进行分割。这适用于我的更大项目。以下是对总体思路的未经测试的演示：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import SplitPane from 'react-split-pane';

const appBarHeight = 65;

function App() {
  return (
    <div className="App">
      <SplitPane split="horizontal" minSize={appBarHeight} maxSize={appBarHeight}>
         <div></div>
         <div>
           <SplitPane>
             <div>A</div>
             <div>B</div>
           </SplitPane>
         </div>
      </SplitPane>
      <div style={{ position: 'absolute', width: "100%" }}>
        <AppBar position="static" style={{ height: appBarHeight }}>
          <Toolbar>
            <Typography variant="h6" color="inherit">
              Photos
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    </div>
  );
}

export default App;

【讨论】：