离子2离子列表中的空白太多

Question

我正在尝试创建一个离子卡，其中一些文本用一行分隔，然后是一个只读的表格数据。屏幕截图仅显示表单数据部分。

我使用了像

这样的代码

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

public class BarChart extends JPanel
{
    private JLabel[] bars;

    public BarChart(int[] data)
    {
        update(data);
    }

    public void update(int[] data)
    {
        this.setSize(190, 155);
        this.setLayout(null);

        int max = 0;
        for (int i = 0; i < 6; i++) {if (data[i] > max) {max = data[i];}}

        bars = new JLabel[6];

        for (int i = 0; i < 6; i++)
        {
            bars[i] = new JLabel();
            bars[i].setOpaque(true);
            bars[i].setBackground(Color.RED);

            int height = (max != 0) ? (data[i]*155)/max : 0;
            System.out.printf("%d, %d, %d,... ", height, data[i], max);

            this.add(bars[i]);
            bars[i].setSize(25, height);
            bars[i].setLocation((31*i)+5, 155-height);
        }
        System.out.println("");
    }
}

但这会在两行之间留下太多的空白。

这个是理想的。 页面看起来像 https://www.dropbox.com/s/ihxh3bckziyfcdp/Screenshot%202017-06-21%2012.40.27.png?dl=0

Answer 1

我并不是100％确定你想要更接近的附加屏幕截图的哪一部分，但由于Ionic只是HTML / JS / CSS，你应该能够添加ID或者对<p>的问题进行分类并减少其上边距。

在Ionic 3中，应该有component.scss个文件，其中包含模板.html文件和.ts文件。

你可以添加这样的东西来减少上边距：

page-foo {
  .tight-paragraph {
    margin-top: 2px;
  }
}

应在page-foo文件的组件声明中建立选择器.ts。

@Component({
  selector: 'page-foo',
  templateUrl: 'foo.html' 
})
export class FooPage {

Answer 2

尝试在离子项外使用<ion-item-group></ion-item-group>。

如果是特定情况，您可以使用CSS来控制同一页面.scss中行之间的距离。