Question

我正在研究使用 React.js 和 Material Ui 将 JavaFx 窗口迁移到 Web 应用程序的原型。结果必须尽可能接近 JavaFx 应用程序的外观。

窗口的布局非常基本，它看起来像一个带有多个文本字段的表单，用于读取或输入数据。

我有 2 个主要问题，因为我在与预期布局匹配时遇到了一些困难。我正在使用 Material Ui 和一些网格组件。

首先，如何对齐 3 个左输入字段（与 AAAAAAA、FFF/FFF、HHHH 相关联，以便每个输入字段的左边框垂直对齐？
然后，我在网格使用中遗漏了一些东西。我不明白为什么在第 3 行，第一个输入字段和 IIII 之间有一个空格。我正在寻找一种方法来删除这个空白空间，我认为网格只会占用标签和输入字段所需的空间，但显然添加了其他一些空白空间。我添加了蓝色、黄色和橙色背景色，以便更好地了解正在发生的事情。我期待“黄色”块在“橙色”块的末尾结束。

您可以在下面找到我的结果和相关代码的屏幕截图感谢您的帮助！

<Grid container direction={'column'} spacing={1}>
    <Grid container item style={{width:"850px"}} >
        <Grid container item xs={3} spacing={1}>
            <Grid item>AAAAAAA</Grid>
            <Grid item xs={7}>
                <Input 
                    inputProps={{ maxLength: 7, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
        <Grid justify='flex-end' container item xs={8} spacing={1} >
            <Grid item>BBBB</Grid>
            <Grid item xs={1}>
                <Input 
                    inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        
            <Grid item>CCCC</Grid>
            <Grid item xs={1}>
                <Input 
                    inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
            <Grid item>DDDD</Grid>
            <Grid item xs={1}>
                <Input 
                    inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
            <Grid item>EEEE/E</Grid>
            <Grid item item xs={2}>
                <Input 
                    inputProps={{ maxLength: 4, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
            <Grid item>/</Grid>
            <Grid item xs={1}>
                <Input 
                    inputProps={{ maxLength: 1, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
    </Grid>
    <Grid container item style={{width:"850px"}}>
        <Grid container item xs={6} spacing={1}>
            <Grid item>FFF/FFF</Grid>
            <Grid item xs={9}>
                <Input 
                    fullWidth="true"
                    inputProps={{ maxLength: 21, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
        <Grid container item xs={6} spacing={1}>
            <Grid item>GGGG</Grid>
            <Grid item xs={10}>
                <Input 
                    fullWidth="true"
                    inputProps={{maxLength: 21, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
    </Grid>
    <Grid container item style={{border:"1px solid red", width:"1000px"}}>
        <Grid container style={{backgroundColor: "yellow"}}spacing={1} xs={2}>
            <Grid item style={{backgroundColor: "blue"}}>HHHH</Grid>
            <Grid item style={{backgroundColor: "orange"}}>
                <Input 
                    fullWidth="true"
                    inputProps={{ maxLength: 4, size: 4, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
        <Grid container spacing={1} xs={2}>
            <Grid item>IIII</Grid>
            <Grid item>
                <Input 
                    fullWidth="true"
                    inputProps={{maxLength: 4, size: 4, style: { textTransform: "uppercase" } }} 
                />
            </Grid>
        </Grid>
    </Grid>
</Grid>

Answer 1

为了使项目垂直居中，您应该使用道具 ContextCompat.getDrawable() 并为其赋予值 public class MainActivity extends AppCompatActivity { private Drawable mDefaultButtonColor; private Drawable mSelectedButtonColor; private Button buttons[]; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Adding all buttons in an array buttons = new Button[]{ findViewById(R.id.btn1), findViewById(R.id.btn2), findViewById(R.id.btn3), findViewById(R.id.btn4) }; } // Method to set the drawable private void toggleButton(Button button, boolean isSelected) { button.setBackground(isSelected ? ContextCompat.getDrawable(this, R.drawable.btn_selected) : ContextCompat.getDrawable(this, R.drawable.btn_unselected)); } // Callback for all the buttons using `android:onClick` XML attribute public void onButtonClick(View view) { for (Button button : buttons) toggleButton(button, false); toggleButton((Button) view, true); } }。对于第二个问题，如果没有重现问题，我无法帮助您：

alignItems

Material-ui 中网格项的对齐方式

1 个答案: