layout:decorator不生效（深入浅出JScrollPane）

本文目录

• 深入浅出JScrollPane
• form设置的数据怎么添加到table

深入浅出JScrollPane

当显示区域受限时，滚动窗格，即JScrollPane，就有了用武之地，用来显示尺寸较大或者尺寸可以的动态变化的控件。

透过滚动窗格看东西，就像隔窗看花，只能看到一尺见方的天地，想要看到更多，就得左右移动，改变角度。

滚动窗格是Decorator模式的实例，能够动态地给控件添加滚动特性。一个典型的例子就是文本区（JTextArea）没有滚动条，如果需要的话，可以将文本区插入到滚动窗格。

如图，滚动窗格由观察窗口（JViewport）和水平、垂直的滚动条（JScrollBar）等构成。JViewport给数据源提供了一个观察的窗口，数据源可以是JTextArea，也可以是其他类型的控件。当数据源的内容超出了JViewport显示范围时，滚动条会自动出现。

JViewport可视区域的大小由两方面因素决定。一是，若数据源实现了Scrollable接口，则可视区域的大小依据 getPreferredScrollableViewportSize() 方法的返回值。二是，若数据源是普通的控件，则可视区域的大小依据 getPreferredSize() 方法的返回值。需要注意的是，后者因为JViewport的默认大小足以显示数据源的所有内容，所以不会出现滚动条。

滚动条允许用户调整可视区域显示的内容。下图描述了滚动条的三个部分：滚动条（knob），按钮（button），以及空白区（track）：

当用户左右移动滚动条时，可视区域相应地左右变化；当用户单击按钮时，可视区域滚动一个单位距离；当用户点击空白区时，可视区域滚动一个距离块。一个单位距离具体有多少，或参考 getScrollableUnitIncrement() 方法，或由 JScrollPane.getHorizontalScrollBar().setUnitIncrement() 方法设定。除此之外，用户还可以设置滚动条的显示方式。

下面用一个具体的例子演示滚动窗格的用法：

第三方布局管理器—— DesignGridLayout 派生于Canonical Grids理念，致力于构建平衡、漂亮的UI。默认情况下，DesignGridLayout不允许 非滚动 的JButton控件扩展到下一行，只能以 PreferredSize (下图BUTTON A大小)显示。在这种情况下， new JScrollPane(new JButton("B")) 语句就像是游戏中的技能包，赋予JButton新的滚动特性，从而满足了DesignGridLayout的扩展要求，成功让BUTTON B占据两行。效果图如下：

本文讨论了滚动窗格，分析了它的原理，并用一个详细的示例演示了滚动窗格的用法。

form设置的数据怎么添加到table

页面代码：

跳转表单的代码：
《Tooltip title=""》
    《a onClick={this.showEditForm.bind(this,text)}》《Icon type="edit"  style={{ fontSize: 18 }} /》《/a》
《/Tooltip》
showEditForm=(text) =》{
        const data_save = this.props.signal.data_save.data
        const data_form = 
        for (let j=0; j《data_save.length; j++) {
            for (let i=0; i《data_save.signal.length; i++) {
                if(data_save.variety == text.variety){
                    this.setState({
                        okText: ’保存’,
                        modalVisible:true,
                        isCreate:false,
                        formTitle: ’交易信号’+’ ’+text.variety,
                        currentEditId:text.variety,
                        data_form: 
                            data_form.valueOf(
                                data_form.push({
                                    time:data_save,
                                    signal:data_save
                                })
                            ),
                    })
                    /*console.log("data_form", data_form)*/
                    this.form.setFieldsValue({
                        ...data_form
                    });
                }
            }
            
        }
    }

表单代码：

import React from ’react’
import PropTypes from ’prop-types’
import { Table, Form, Card, Tooltip, Input, InputNumber, Radio, Modal,Select, Icon, Button, TimePicker } from ’antd’;
import currencies from ’../../common/currencies.js’;
const FormItem = Form.Item
const format = ’HH:mm’;
const AddSignal =(props) =》 {
  console.log("form",props)
  this.state ={
    data: props.data,
    loading: false,
  }
  console.log("state", this.state)
  const handleSubmit = (e) =》 {
    e.preventDefault();
    form.validateFields((err, values) =》{
      if(!err) {
          this.state.data.valueOf(this.state.data.push(values))
          console.log(’form1’, values, this.state.data)
      }
    })
  }
  const {visible, onCancel, onCreateOrSave, form, title, okText, initValues} = props;
  const { getFieldDecorator } = form;
  const clumn = [
  {
    title: ’时间’,
    dataIndex: ’time’,
    width: 100,
    editable: true,
  },
  {
    title: ’信号’,
    dataIndex: ’signal’,
    width: 120,
    editable: true,
  },
  {
    title: ’操作’,
    dataIndex: ’action’,
    width: 30,
    render: (text, record, index) =》 (
      《span》
        《Tooltip title="删除"》
          《a style={{color:"red"}}》
              《Icon style={{ fontSize: 16}} type="delete" /》
          《/a》
        《/Tooltip》
      《/span》
    ),
  }]
  return (
    《Modal
      visible={visible}
      title={title}
      okText={okText}
      onCancel={onCancel}
      onOk={onCreateOrSave}》
        《Form layout="inline" onSubmit={handleSubmit}》
          《FormItem》
            {getFieldDecorator(’time’,{})(
            /*《TimePicker format={format} /》*/《Input /》
            )}
          《/FormItem》
          《FormItem》
            {getFieldDecorator(’signal’,{})(
              《Select placeholder="请选择信号" style={{ width: 160}} 》
                《Select.Option value=" 《/Select.Option》
              《Select.Option value=" 《/Select.Option》
              《Select.Option value=" 《/Select.Option》
              《/Select》
            )}
          《/FormItem》
          《FormItem》《Button htmlType="submit" type="primary"》新增《/Button》《/FormItem》
        《/Form》
        《Table rowKey=’time’ columns={clumn} dataSource={this.state.data} pagination={false} size="small" scroll={{y: 350}} /》
    《/Modal》
  )
}
export default Form.create()(AddSignal)