如何在 Elm 中垂直对齐三个表格？

Question

1) 我真的不明白 Element 和 Form 有什么不同 类。可能会导致以下问题。

2) 我的 main 函数将所有信号映射到一个 assemble 函数，该函数在每次更新时组装视图

assemble: Float -> Float -> Element
assemble screen_w screen_h =
    [
        background screen_w screen_h,
        header screen_w screen_h,
        info screen_w screen_h
    ] 
        |> collage (round screen_w)  (round screen_h) 

main: Signal Element
main = 
    assemble
        <~ (toFloat <~ Window.width)
        ~ (toFloat <~ Window.height)

此架构需要 header 到 return Form

3) header 使用一种形式的文本和另外两种形式来装饰它。

我需要将它们一个放在另一个之上并合并成一个形式。

stripe: Float -> Element
stripe w = 
    rect w 10
        |> filled black
        |> show
header: Float -> Float -> Form
header screen_w screen_h =
    [
        stripe screen_w,
        fromString "My awesome header"
            |> height 64
            |> text
            |> show
        ,
        stripe screen_w
    ]
        |> flow down
        |> toForm
        |> move (0, screen_h/2 - header_size/2 - header_shift)

4) 上面的代码显示

<internal structure> 
<internal structure>
<internal structure>

代替 header 和条纹。

貌似show无法逆toForm

因为以下

main = 
  show 42
    |> toForm
    |> show

也显示

<internal structure> 

我可以使用 Elm 将三个表单一个一个地对齐吗？

Answer 1

我自己对 Elm 还很陌生，但我认为要走的路是将 header 的每个部分都保留为一个表单（不要通过管道显示），然后单独移动每个部分。然后 header 可以 return 一个表单列表，然后将其与 assemble.

中的列表连接起来

所以一个有效的 header 函数可能看起来像这样：

import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Text exposing (..)
import Color exposing (..)

main = 
  collage 500 500 (header 500 500)

stripe: Float -> Form
stripe w = 
  rect w 10
    |> filled black


header: Float -> Float -> List Form
header screen_w screen_h =
[
    stripe screen_w
        |> move (0, 245) --calculate based on screen coords
    ,
    fromString "My awesome header"
        |> Text.height 64
        |> text
        |> move (50, 220) --calculate based on screen coords
    ,
    stripe screen_w
        |> move (0, 180) --calculate based on screen coords
]

所以，在这种情况下，assemble 函数看起来像：

assemble: Float -> Float -> Element
assemble screen_w screen_h =
    [background screen_w screen_h] ++
     header screen_w screen_h ++
    [info screen_w screen_h] 
        |> collage (round screen_w)  (round screen_h) 

Answer 2

Forms 和 Elements 之间的差异

Forms 是可以在拼贴中显示的自由格式图形。 Elements 是具有已知宽度和高度的矩形事物。

目的Graphics.Element.show

show 函数更像是一个调试工具，而不是将 Forms 转换为 Elements 的函数。您自己定义的所有数据可能都可以通过 show 显示，但是某些来自库的内部数据无法显示，这就是为什么您得到 <internal structure> 输出的原因。要将 Forms 转换为 Elements，请使用 Graphics.Collage.collage 函数。

Forms

的对齐

核心库不支持以类似 Element 的方式对齐和分布表单。您可以尝试第 3 方库 align-distribute for it, which should make it easier. Another more powerful 3rd party library is diagrams，但我不确定它是否易于使用，也不确定您是否需要比我链接到的其他库更强大的功能。