Question

我们在自定义表格视图单元格中显示一些数据，但是如果某些标签为空，我们将隐藏标签并在估计的行高中使用uitableview.automaticdimension，但效果不佳。谢谢

在

中声明

func viewDidLoad() {
    self.cabinetVC.estimatedRowHeight = 260
        self.cabinetVC.rowHeight = UITableView.automaticDimension
    }

    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
}

Answer 1

您应该注释或删除此委托方法，

import React from 'react';
import './TaskColumn.css';
import $ from 'jquery';
import BtnNewTask from '../BtnNewTask/BtnNewTask';
import ToastTask from '../ToastTask/ToastTask';
import ModalTask from '../ModalTask/ModalTask';

class TaskColumn extends React.Component{
    state = {
        tasks: [],
        novaTarefa : true
    };

    // Função chamada ao clicar em CONFIRMAR ao cadastrar uma nova tarefa
    newTask = () => {

        const form = document.getElementById('formTarefa');
        var formValido = true;

        // Verificando se todos os campos foram preenchidos
        for(var i=0; i < form.elements.length; i++){
            if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
                formValido = false;
                break;
            }
        }

        if(formValido){
            // Cria uma nova tarefa
            var novaTarefa  = {
                'Titulo': `(${document.getElementById('nomeCliente').value}) ${document.getElementById('modelo').value}`,
                'Modelo': document.getElementById('modelo').value,
                'Cliente':document.getElementById('nomeCliente').value,
                'Descricao':document.getElementById('descricao').value,
                'DataPedido': document.getElementById('criacao').value,
                'DataEntrega': document.getElementById('entrega').value,
                'Estado': 0
            }

            // Adiciona a nova tarefa no array de objetos salvos no ESTADO do componente
            var state = this.state.tasks;
            state.push(novaTarefa);

            // Atualiza o ESTADO do componente
            this.setState(
                {
                    tasks: state,
                    novaTarefa: this.state.novaTarefa
                }
            );

            $('#modalNewTask').modal('hide');
        }else{
            // Mostrar mensagem de erro
            $('#erroPreenchimento').addClass('show');
            window.setTimeout(()=>{
                document.getElementById('erroPreenchimento').classList.remove('show');
            }, 2000);
        }
    }

    editTask = () => {
        console.log("Editando a tarefa...");
    }

    updateButton = () => {
        var stateTemporario = this.state;
        stateTemporario.novaTarefa = false;
        // console.log(stateTemporario.novaTarefa);
        this.setState(stateTemporario);
        // console.log(this.state);
    }

    render(){
        return (
            <div className="col col-md-4">
                <div className="card">
                    <div className="card-header">
                        {this.props.title}        
                    </div>

                    {/* Se houver alguma tarefa salva irá renderiza-las */}
                    {this.state.tasks.length > 0 &&
                        <div className="card-body">
                            {
                                this.state.tasks.map(
                                    (task, i) => {
                                        return (
                                            <ToastTask task={task} i={i} key={i} onClick={this.updateButton}/>                
                                        );
                                    }
                                )
                            }
                        </div>
                    }

                    {/* Se a coluna recebe o título Disponível, então renderiza o botão para adicionar uma nova tarefa */}
                    {this.props.title === "Disponível" && 
                            <BtnNewTask /> 
                    }
                    <ModalTask newTask={this.newTask} editTask={this.editTask} novaTarefa={this.state.novaTarefa} />
                </div>

            </div>
        );
    };
}

export default TaskColumn;

您已经在import React from 'react'; import './ModalTask.css'; class ModalTask extends React.Component { state = { novaTarefa: true } componentDidUpdate(){ console.warn("ModalTask DidUpdate"); console.log(this.props.novaTarefa); console.log(this.state.novaTarefa); // this.setState({novaTarefa: this.props.novaTarefa}); } render (){ return ( <div className="modal fade" id="modalNewTask" tabIndex="-1" role="dialog" aria-labelledby="modalNewTask" aria-hidden="true"> <div className="alert alert-warning fade" id="erroPreenchimento" role="alert"> Preencha <strong>todos</strong> os campos! <button type="button" className="close" aria-label="Close" onClick={()=>{document.getElementById('erroPreenchimento').classList.remove('show');}}> <span aria-hidden="true">×</span> </button> </div> <div className="modal-dialog modal-dialog-centered" role="document"> <div className="modal-content"> <div className="modal-header"> <h5 className="modal-title">Nova Tarefa</h5> <button type="button" className="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div className="modal-body"> <div className="container-fluid"> <form id="formTarefa"> <div className="form-row"> <div className="col"> <div className="form-group"> <label htmlFor="nomeCliente">Cliente</label> <input type="text" className="form-control" id="nomeCliente" placeholder="José Souza" required/> </div> </div> <div className="col"> <div className="form-group"> <label htmlFor="modelo">Modelo do aparelho</label> <input type="text" className="form-control" id="modelo" placeholder="Lenovo Ideapad 310" required/> </div> </div> </div> <div className="form-group"> <label htmlFor="descricao">Descrição</label> <textarea className="form-control" id="descricao" rows="5" defaultValue={"Relatório:\n\nObservações:"} required></textarea> <small className="form-text text-muted"> Sua descrição deve ser precisa para facilitar a manutenção e lembre-se de informar os problemas relatados pelo cliente. </small> </div> <div className="form-row"> <div className="col"> <div className="form-group"> <label htmlFor="criacao">Data do pedido</label> <input type="date" id="criacao" style={{'width':'100%'}} required/> </div> </div> <div className="col"> <div className="form-group"> <label htmlFor="entrega">Data de entrega</label> <input type="date" id="entrega" style={{'width':'100%'}} required/> </div> </div> </div> </form> </div> </div> <div className="modal-footer"> <button type="button" className="btn btn-danger" data-dismiss="modal">Cancelar</button> {/* Here is where I try to render the proper button */} {this.state.novaTarefa ? ( <button type="button" className="btn btn-success" id="botaoConfirmar" onClick={this.props.newTask}>Confirmar {console.warn("Botão Nova tarefa")}</button> ) : ( <button type="button" className="btn btn-success" id="botaoConfirmar" onClick={this.props.editTask}>Confirmar {console.warn("Botão Editar tarefa")}</button> )} </div> </div> </div> </div> ); } } export default ModalTask;中提供了一些静态值，这将有助于适当调整tableView单元格的大小。

尝试并分享结果。

编辑：对于单元格中的3x3标签，您可以按以下步骤操作：

1）获取一个垂直的stackView

2）向其中添加3个水平stackView。

3）向每个水平stackView添加3个标签

4）将numberOfLines设置为零

5）为所有内部stackViews和Label设置equalWidth约束。

6）设置所有stackViews和Label的开头，顶部，结尾和底部。

对于标签，您没有文本-将其设置为nil即可正确处理。

Answer 2

自动尺寸依赖于“自动布局”来确定单元的高度。这意味着必须存在非模糊的约束。确保从单元格的顶部到单元格的底部都有约束。

例如：

---------------
       |
   ---------
   | label |
   ---------
       |
---------------

UITableViewCell自动尺寸无法正常运行

2 个答案: