使用 Javascript 进行计算器的网格布局

Question

谁能告诉我使用网格布局设置计算器按钮的最佳方法

Answer 1

这几乎是一个太笼统的问题，你甚至没有说清楚你在说什么编程语言（JavaScript？Java？X.net？）。

让我给你一个使用 Java 的例子。基本思想是为每个按钮创建一个 javax.swing.JButton（假设您使用 Swing），然后考虑您想要实现的布局（显然是网格），并将按钮添加到父组件。例如，模仿 GNOME 计算器的布局：

import java.awt.*;
import javax.swing.*;

/**
 * +----+----+----+----+
 * |Bksp| CE | Clr| +- |
 * +----+----+----+----+
 * | 7  | 8  | 9  | /  |
 * +----+----+----+----+
 * | 4  | 5  | 6  | *  |
 * +----+----+----+----+
 * | 1  | 2  | 3  | -  |
 * +----+----+----+----+
 * | 0  | .  | =  | +  |
 * +----+----+----+----+
 */
public class Calculator extends JPanel {
    public Calculator() {
        JButton bksp      = new JButton("Bksp");
        JButton ce        = new JButton("CE");
        JButton clr       = new JButton("Clr");
        JButton plusminus = new JButton("+-");
        JButton div       = new JButton("/");
        JButton mult      = new JButton("*");
        JButton minus     = new JButton("-");
        JButton plus      = new JButton("+");
        JButton equals    = new JButton("=");
        JButton dot       = new JButton(".");
        JButton[] digits = new JButton[10];
        for (int i = 0; i < digits.length; i++) {
            digits[i] = new JButton(String.valueOf(i));
        }

        /* do the layout */
        setLayout(new GridLayout(5, 4, 5, 5));
        add(bksp);
        add(ce);
        add(clr);
        add(plusminus);
        add(digits[7]);
        add(digits[8]);
        add(digits[9]);
        add(div);
        add(digits[4]);
        add(digits[5]);
        add(digits[6]);
        add(mult);
        add(digits[1]);
        add(digits[2]);
        add(digits[3]);
        add(minus);
        add(digits[0]);
        add(dot);
        add(equals);
        add(plus);
    }

    public static void main(String[] args) {
        Calculator calc = new Calculator();

        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(calc);

        frame.setSize(300, 300);
        frame.setVisible(true);
    }
}

使用new GridLayout(5, 4, 5, 5)，您定义了一个 5x4 网格（5 行 4 列）和 5 个像素的单元格间距，水平和垂直。之后，您只需按正确的顺序（从左到右、从上到下）添加按钮。