Question

我正在尝试使用Material UI Grid组件来实现特定的布局，但我一生都无法正确地做到这一点。

我有一个Dialog，我希望布局以这种方式结束：

蓝色框包含有关项目的信息，绿色框包含某种媒体，黄色框包含描述性文本。

但是目前，使用此代码，它的最终结果如下：

<Grid xl={12}>
    <Grid spacing={0} xs={2}>
        <Grid container direction="column">
            <Grid item xs={1}>
                { this.getGridItems("Platforms", data["platforms"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Engines", data["engines"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Frameworks", data["frameworks"].split(','), true) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Languages", data["languages"].split(',')) }
            </Grid>
            <Grid item xs={1}>
                { this.getGridItems("Roles", data["roles"].split(',')) }
            </Grid>
        </Grid>
    </Grid>
    <Grid spacing={0} xl={10}>
        <Grid container>
            <Grid item xl={9}>
                <h1>Image Goes Here</h1>
            </Grid>
            <Grid item xl={3}>
                <h1>Description</h1>
                { data["description"] }
            </Grid>
        </Grid>
    </Grid>
</Grid>

我无法弄清楚哪里出了问题，因为我无法解决Grid布局的工作原理。请帮忙吗？

如有必要，以下是getGridItems()的代码：

getGridItems = (header, data, chips) => {
    let list = [];
    let fontSize = 11;
    list.push(
        <h5>{ header }</h5>
    );
    if(data.length > 0 && data[0] !== '') {
        if(chips !== undefined && true) {
            data.forEach(value => {
                let chipData = ChipConstants[value];
                list.push(
                    <Grid item xs>
                        <Chip
                            style={{ fontSize: fontSize}}
                            avatar={
                                <Avatar
                                    style={{ width: 24, height: 24 }}
                                    alt={chipData["avatar"]["alt"]}
                                    src={require("../img/avatars/"+chipData["avatar"]["img"])}
                                />}
                            label={chipData["avatar"]["alt"]}
                            className={styles.chip}
                        />
                    </Grid>
                );
            });
        } else {
            data.forEach(value => {
                list.push(
                    <Grid item xs style={{ fontSize: fontSize}}>
                        { value }
                    </Grid>
                );
            });
        }
    } else {
        list.push(
            <Grid item xs style={{ fontSize: fontSize}}>
                None
            </Grid>
        );
    }
    return list;
};

Answer 1

我并没有真正看到您当前的代码与所需内容之间的关系，因此，我没有尝试更正您的当前代码，而是提供了一个起点，提供了所需内容的基本结构。

如果您对我的代码中的Grid的工作方式有特定的疑问，我将根据需要进行详细说明。

index.js

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import Button from "@material-ui/core/Button";
import MyDialog from "./MyDialog";

class App extends React.Component {
  state = {
    open: false
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };
  render() {
    return (
      <>
        <CssBaseline />
        <Button variant="contained" onClick={this.handleClickOpen}>
          Open Dialog
        </Button>
        <MyDialog open={this.state.open} handleClose={this.handleClose} />
      </>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

MyDialog.js

import React from "react";
import Grid from "@material-ui/core/Grid";
import Dialog from "@material-ui/core/Dialog";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  root: {
    height: "100%"
  },
  project: {
    backgroundColor: "lightblue",
    height: "100%"
  },
  right: {
    height: "100%"
  },
  media: {
    backgroundColor: "lightgreen",
    height: "70%"
  },
  desc: {
    backgroundColor: "yellow",
    height: "30%"
  }
};
const MyDialog = props => {
  return (
    <Dialog fullScreen open={props.open} onClose={props.handleClose}>
      <Grid container className={props.classes.root}>
        <Grid item xs={3} className={props.classes.project}>
          <IconButton
            color="inherit"
            onClick={props.handleClose}
            aria-label="Close"
          >
            <CloseIcon />
          </IconButton>
          Project
        </Grid>
        <Grid item xs={9}>
          <Grid container direction="column" className={props.classes.right}>
            <Grid item className={props.classes.media}>
              Media
            </Grid>
            <Grid item className={props.classes.desc}>
              Description
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Dialog>
  );
};
export default withStyles(styles)(MyDialog);

在这里，您可以在CodeSandbox中进行试验：

React Material UI中的网格布局出现问题

1 个答案: