HarmonyOS鸿蒙Next中Flex布局ItemAlign.Stretch子元素没有撑开

HarmonyOS鸿蒙Next中Flex布局ItemAlign.Stretch子元素没有撑开 当Text文本很长时，高度没有撑开，测试发现三行内没问题

Flex({ alignItems: ItemAlign.Stretch }) {
  Text('地址1')
    .borderColor($r('app.color.color_border'))
    .tdStyles()

  Column() {
    Text('商品1')
    Text('商品2')
}.borderColor($r('app.color.color_border')).tdStyles().justifyContent(FlexAlign.Center)

  Column() {
    Text('规则1')
    Text('规则2')
    Text('很长很长很长很长很长很长很长的规则3')
}.borderColor($r('app.color.color_border')).tdStyles().justifyContent(FlexAlign.Center)

  Text('¥100').borderColor($r('app.color.color_border')).tdStyles()
}.width('100%')

Flex({ alignItems: ItemAlign.Stretch }) {
  Text('地址2')
    .borderColor($r('app.color.color_border'))
    .tdStyles()

  Column() {
    Text('商品1')
    Text('商品2')
}.borderColor($r('app.color.color_border')).tdStyles().justifyContent(FlexAlign.Center)

  Column() {
    Text('规则1')
    Text('规则2')
    Text('规则3')
}.borderColor($r('app.color.color_border')).tdStyles().justifyContent(FlexAlign.Center)

  Text('¥100').borderColor($r('app.color.color_border')).tdStyles()
}.width('100%')

cke_1205.png


更多关于HarmonyOS鸿蒙Next中Flex布局ItemAlign.Stretch子元素没有撑开的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

我这里测试是没问题的，可以支持很多行自动撑高的。

我怀疑是tdStyles 里写了什么样式，阻止了它的高度。

我去掉tdStyles 是可以实现自动撑高的。

更多关于HarmonyOS鸿蒙Next中Flex布局ItemAlign.Stretch子元素没有撑开的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


的确是 tdStyles 里面的 width(‘33%’)导致的，改成 25% 就没问题了。不过不太理解宽度不够不是自适应压缩嘛，怎么影响高度了，

可能连续使用多个33%已经超出了屏幕吧。。。，

如何解决“无法加载文件，因为在此系统上禁止运行脚本”错误

问题描述

在Windows系统中，当尝试运行脚本（如PowerShell脚本）时，可能会遇到以下错误：

无法加载文件 [脚本路径]，因为在此系统上禁止运行脚本。

此错误通常是由于系统的执行策略限制导致的。

解决方法

方法一：以管理员身份运行PowerShell并更改执行策略

  1. 在开始菜单中搜索“PowerShell”。
  2. 右键单击“Windows PowerShell”，选择“以管理员身份运行”。
  3. 输入以下命令查看当前执行策略：
    Get-ExecutionPolicy
  4. 输入以下命令更改执行策略（例如，设置为RemoteSigned）：
    Set-ExecutionPolicy RemoteSigned
  5. 输入“Y”确认更改。

方法二：为当前用户更改执行策略

如果不想更改全局策略，可以仅为当前用户更改：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

方法三：在运行脚本时绕过执行策略

在运行特定脚本时，可以临时绕过执行策略：

powershell -ExecutionPolicy Bypass -File [脚本路径]

注意事项

  • RemoteSigned策略允许运行本地创建的脚本，但运行从互联网下载的脚本时需要数字签名。
  • 更改执行策略可能会带来安全风险，请确保只运行可信的脚本。
  • 完成脚本运行后，可以考虑将执行策略恢复为默认值（Restricted）：
    Set-ExecutionPolicy Restricted

总结

通过调整PowerShell的执行策略，可以解决脚本无法运行的问题。建议根据实际需求选择最合适的方法，并在使用完毕后恢复安全设置。

在HarmonyOS Next中，Flex布局的ItemAlign.Stretch属性用于让子元素在交叉轴上拉伸填充容器。如果子元素没有撑开，通常是因为子元素自身设置了固定尺寸（如width/height），或者父容器在交叉轴方向上的尺寸未明确指定。请检查子元素的尺寸属性是否设为matchParent或百分比，并确保父容器有确定的尺寸。

在HarmonyOS Next的Flex布局中，ItemAlign.Stretch要求子组件在交叉轴上拉伸以填满容器。根据你提供的代码和现象，问题很可能出在子组件自身的尺寸约束上。

ItemAlign.Stretch生效的前提是子组件在交叉轴方向没有设置固定尺寸（例如.height()），并且其父容器（即Flex）在该方向有明确的尺寸。在你的代码中，两个Column子组件都应用了.justifyContent(FlexAlign.Center)，这本身不会阻止拉伸。核心问题在于Text组件。

当Text内容过长时，其默认行为是单行显示并溢出。虽然它被包裹在Column中，但Column作为Flex的子项，其高度默认由内容（即内部Text）撑开。然而，ItemAlign.Stretch作用于Flex的直接子组件（这里是Column），它会尝试将Column的高度拉伸至与Flex容器同高。但拉伸的Column高度需要能有效传递到其内部的Text，使Text能够换行并填充该高度。

关键点：Text组件需要允许换行以响应父容器的高度。默认情况下，Text可能没有设置最大行数或文本溢出模式，导致在布局计算时无法正确利用拉伸得到的高度。

解决方案： 为你Column中的长文本Text组件添加.maxLines(0)（表示不限制行数）和.textOverflow({overflow: TextOverflow.Ellipsis})（或其它溢出模式），明确其可以换行。例如：

Text('很长很长很长很长很长很长很长的规则3')
  .maxLines(0)
  .textOverflow({overflow: TextOverflow.Ellipsis})

这样，当Column被ItemAlign.Stretch拉伸后，内部的Text就能感知到可用高度并进行换行，从而撑开内容。

另外，请确保包含长文本的Column本身没有设置固定高度，否则会阻止拉伸。从你的代码看，.tdStyles()可能包含高度样式，需要检查其实现是否限制了高度。

回到顶部