Xamarin.Forms的StackLayout能否像Android LinearLayout一样使用weight属性？

问题解答 #

1. StackLayout是否支持weight属性 #

Xamarin.Forms的StackLayout 不原生支持类似Android LinearLayout的weight权重分配属性，StackLayout本身仅支持按照子元素的固有尺寸或者设定的固定尺寸排列，无法直接按比例分配剩余空间。

2. 推荐实现方案 #

你可以选择以下两种布局替代实现需求，同时规避之前数百行Grid导致的性能问题：

• 方案1：使用带比例定义的Grid布局
  你之前遇到的性能问题是因为按分钟拆分出了数百行RowDefinition导致的，实际做时间线不需要逐分钟拆行：只需要根据时间轴总时长，将单个任务的占比直接设置为对应RowDefinition的Height比例值（带*的比例单位）即可，全局只需要和任务数量匹配的行数即可，不需要拆分大量行，性能损耗极低。
  示例代码：

  <!-- 总高度按24小时=1440分钟为总比例计算 -->
  <Grid>
      <Grid.RowDefinitions>
          <RowDefinition Height="120*" /> <!-- 占2小时的任务 -->
          <RowDefinition Height="60*" /> <!-- 占1小时的任务 -->
          <RowDefinition Height="1260*" /> <!-- 剩余21小时空白 -->
      </Grid.RowDefinitions>
      <BoxView Grid.Row="0" Color="Red" />
      <BoxView Grid.Row="1" Color="Blue" />
  </Grid>
  

• 方案2：使用FlexLayout布局
  FlexLayout的FlexLayout.Grow附加属性完全等效于Android LinearLayout的weight属性，你只需要将FlexLayout的Direction设置为Vertical（垂直时间线），子元素的FlexLayout.Grow设置为对应时长占比即可，实现逻辑和你之前Android端的开发习惯完全一致。
  示例代码：

  <FlexLayout Direction="Vertical">
      <!-- 占2小时的任务，Grow设为2 -->
      <BoxView FlexLayout.Grow="2" Color="Red" />
      <!-- 占1小时的任务，Grow设为1 -->
      <BoxView FlexLayout.Grow="1" Color="Blue" />
      <!-- 占位空白，Grow设为21占满剩余空间 -->
      <BoxView FlexLayout.Grow="21" Color="Transparent" />
  </FlexLayout>
  

效果参考 #

内容的提问来源于stack exchange，提问作者XHL