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个像素的单元格间距，水平和垂直。之后，您只需按正确的顺序添加按钮（从左到右，从上到下）。

使用Javascript为计算器的网格布局

1 个答案: