代码之家 › 专栏 › 技术社区 › OmniOwl

React Material UI中的网格布局问题

material-ui reactjs javascript

OmniOwl · 技术社区 · 6 年前

我正在尝试使用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>

我不知道我哪里出了错,因为我无法集中精力 网格 布局工程。请帮忙?

如果有必要,这是 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;
};

1 回复 | 直到 6 年前

Ryan Cogswell 6 年前

我并没有真正了解当前代码与您想要的内容之间的关系,因此,我将提供一个起点,它提供您想要的内容的基本结构,而不是尝试更正当前代码。

如果您对 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);

这里是一个代码沙盒,你可以用它进行实验: