const WIDTH = 750;
const HEIGHT = 1334;
const ctx = uni.createCanvasContext('myCanvas', this);
const padding = 10; // 内边距
const colWidths = [100, 100, 100, 100, 100, 100, 100]; // 每列的宽度，根据数据动态调整
const colNames = ['序号', '商品名称', '报单数', '分拣数', '单位', '单价', '小计']; // 列名
const rowHeight = 30; // 行高
const textStyle = {
fontSize: 14,
fillStyle: '#000'
}; // 文本样式
const lineStyle = {
strokeStyle: '#ccc',
lineWidth: 1
}; // 线样式
const bgColor = '#f9f9f9'; // 背景色
const textColor = '#333'; // 文本颜色
const headerBgColor = '#ddd'; // 表头背景色
const headerTextColor = '#000'; // 表头文本颜色
const headerHeight = 40; // 表头高度
let totalWidth = colWidths.reduce((acc, cur) => acc + cur, 0) + padding * 2; // 总宽度，包括内边距
let totalHeight = headerHeight + (this.goods_info.length + 1) * rowHeight; // 总高度，包括表头和行高
// 设置画布大小
ctx.setFillStyle(bgColor);
ctx.fillRect(0, 0, totalWidth, totalHeight); // 绘制背景
ctx.setFillStyle(headerBgColor); // 设置表头背景色
ctx.fillRect(0, 0, totalWidth, headerHeight); // 绘制表头背景
ctx.setFontSize(textStyle.fontSize); // 设置字体大小
ctx.setFillStyle(headerTextColor); // 设置表头文本颜色
colNames.forEach((name, index) => { // 绘制表头文本
ctx.fillText(name, padding + colWidths.slice(0, index).reduce((acc, cur) => acc + cur,
0), headerHeight / 2 + padding);
ctx.setStrokeStyle(lineStyle.strokeStyle); // 设置线条颜色和宽度，绘制列分隔线
ctx.moveTo(padding + colWidths.slice(0, index + 1).reduce((acc, cur) => acc + cur, 0),
headerHeight);
ctx.lineTo(padding + colWidths.slice(0, index + 1).reduce((acc, cur) => acc + cur, 0),
totalHeight);
ctx.stroke(); // 绘制线条
});
const startX = 20;
const startY = 20;
// 绘制表格
let tableRows = []
tableRows = this.goods_info.map(item => [0, item.goods_name, item.num,item.sortingstatu,item.unitname, item.price, item.totalprice
]);
// 绘制表行
tableRows.forEach((row, rowIndex) => {
row.forEach((cell, colIndex) => {
ctx.fillText(cell, startX + colIndex * colWidths, startY + (rowIndex + 1) *
rowHeight + rowHeight / 2);
ctx.strokeRect(startX + colIndex * colWidths, startY + (rowIndex + 1) * rowHeight,
colWidths, rowHeight);
});
});
let tableFooter = ['总计', '', this.total_price]
// 绘制表尾
const footerY = startY + (this.goods_info.length + 1) * rowHeight;
tableFooter.forEach((footer, index) => {
ctx.fillText(footer, startX + index * colWidths, footerY + rowHeight / 2);
ctx.strokeRect(startX + index * colWidths, footerY, colWidths, rowHeight);
});
console.log("canvas");
ctx.draw()
调整UITableViewCell布局和间距
本文介绍了一种在iOS应用中优化UITableView显示效果的方法，通过调整UITableViewCell的布局边距和分隔符内距来改善用户体验。具体实现了当UITableViewCell响应布局边距和分隔符内距设置时，将其设置为零。
扫一扫
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
