Question

这就是问题所在……我有一个普通的（未最大化-自定义大小）表格，上面有5列和2行图块（TRectangle）（图1）。我的问题是我如何使用“锚”或“层”或其他任何东西在最大化时正确对齐/调整图块大小（图3）。意味着如果按照我的逻辑，我将所有Align属性（L / T / R / B）设置为True，则图块应该稍微变大并在它们之间保持相同的边距（图3），但是实际上，不要，它们在最大化时只是彼此重叠，如图2所示。 2.我的问题是如何设置磁贴，使它们稍大一些，并保持它们之间的空白，就像最大化窗口时表单正常（我的自定义大小）时一样-基本上让它们很好地填充表单，而不是重叠。谢谢！ PS：对不起，我的la脚绘画:)

Answer 1

经过深思熟虑，我认为应该有一种完全符合您要求的解决方案。因此，除了Align=Scale属性之外，该解决方案还包括对所有外侧使用Margin属性，并通过两个相邻组件之一对内侧使用Top row: 1: left, top, right 2..5: top, right Bottom row: 6: left, top, right, bottom 7..10: top, right, bottom属性。

如果我们以下面的形式考虑从左到右，从上到下编号的矩形，则将边距设置为5.0，如下所示：

const path = require('path');
var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const sourcePath = path.join(__dirname, './src');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  entry: {
      app: './src/index.js'
  },
  output: {
      filename: '[name].[chunkhash:4].js',
      chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
      path: path.resolve(__dirname, 'dist'),  //where to put the bundles
      publicPath: "/" // This is used to generate URLs to e.g. images
    },
  module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: { minimize: true }
            }
          ]
        },

        {
          test: /\.(scss|sass|css)$/,
          use: [
              MiniCssExtractPlugin.loader,
              { loader: 'css-loader' },
              { loader: 'postcss-loader',
                  options: {
                    plugins: () => [autoprefixer({ grid: false})]
                  }
              },
              {
                loader: 'fast-sass-loader',
                options: {
                  includePaths: [  path.resolve(__dirname, 'src'), path.resolve(__dirname, 'src','styles') ,'./node_modules', '/node_modules/materialize-css/sass/components'],
                  sourceMap: true
                }
              }
          ]

        },
        {
          test: /\.(jpg|png)$/,
          loader: 'url-loader',
          options: {
            limit: 8192 // inline base64 URLs for <=8k images, direct URLs for the rest
          },
        },
        {    
          test: /\.svg/,
          use: {
            loader: 'svg-url-loader',
            options: {}
          }
        }

      ]
    },

    resolve: {
      alias: {
        components:  path.resolve(__dirname, 'src', 'components'),
        navigation:  path.resolve(__dirname, 'src', 'navigation'),
        reducers:    path.resolve(__dirname, 'src', 'reducers'),
        actions:     path.resolve(__dirname, 'src', 'actions'),
        routes:      path.resolve(__dirname, 'src', 'routes'),
        utils:       path.resolve(__dirname, 'src', 'utils'),
        styles:      path.resolve(__dirname, 'src', 'styles'),
        images:      path.resolve(__dirname, 'public', 'images'),
        public:      path.resolve(__dirname, 'public'),
        test:        path.resolve(__dirname, 'src', 'test'),
        materialize: path.resolve(__dirname, 'node_modules', 'materialize-css', 'sass', 'components')
      },
      // extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
      modules: [
        path.resolve(__dirname, 'node_modules'),
        sourcePath
      ]
    },
    optimization: {
          splitChunks: {
              cacheGroups: {
                  js: {
                      test: /\.js$/,
                      name: "commons",
                      chunks: "all",
                      minChunks: 7,
                  },
                  styles: {
                    test: /\.(scss|sass|css)$/,
                    name: "styles",
                    chunks: "all",
                    enforce: true
                  }
              }
          }
    },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new CopyWebpackPlugin([ { from: __dirname + '/public', to: __dirname + '/dist/public' } ]),
    new MiniCssExtractPlugin({filename: "[name].css"}),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
       "template": "./src/template.html",
       "filename": "index.html",
       "hash": false,
       "inject": true,
       "compile": true,
       "favicon": false,
       "minify": true,
       "cache": true,
       "showErrors": true,
       "chunks": "all",
       "excludeChunks": [],
       "title": "ShareWalks",
       "xhtml": true,
       "chunksSortMode": 'none' //fixes bug
       })
   ]
};

可以以原始大小的形式以及以水平和垂直两个大小调整的形式看到结果。到窗体边界和矩形之间的距离保持不变，这对于完全最大化的窗体也是如此。

Answer 2

这是 TGridPanelLayout 的工作。他们有点笨拙地使用，但是可以在尺寸变化的情况下证明自己。

创建 TGridPanelLayout 并设置其Align = Client。
添加缺少的列。首次创建时，布局有2行2列。您可以通过向布局的ColumnCollection中添加项目来获取更多信息。
将所有列的属性设置为SizeStyle = Percent和Value = 20。
向布局中添加10个矩形，并设置其Align = Client
设置布局的“填充”和“边距”属性，以获取所需的矩形之间和周围的间隙。

所有这些均不使用缩放，因此边距不会随着调整大小而改变。它只是重新分配了矩形内的多余空间。

关于第3点的注释。在SizeStyle为Percent ...时设置多列或行的Value属性可以在IDE中使用。您必须执行多次，每次值接近您的要求时。截至柏林，此问题尚未解决（我没有东京）。如果您不想这样做，则可以直接编辑dfm并只写值;）

如何在Firemonkey中最大化时对齐/调整5个矩形的大小？

2 个答案: