#跟着坚果学鸿蒙#权重（weight）就是按比例来分配组件占用父组件的大小，在水平布局下计算 公式为： 父布局可分配宽度=父布局宽度-所有子组件 width 之和； 组件宽度=组件 weight/所有组件 weight 之和*父布局可分配宽度； 实际使用过程中，建议使用 width=0 来按比例分配父布局的宽度，1:1:1 效果如 下：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
 xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="horizontal"> 
 <Button 
 ohos:width="0vp" 
 ohos:height="20vp"ohos:weight="1" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button 
 ohos:width="0vp" 
 ohos:height="20vp"ohos:weight="1" 
 ohos:background_element="$graphic:color_gray_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="0vp" 
 ohos:height="20vp" 
 ohos:weight="1" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
</DirectionalLayout> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> 
</shape> 

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff888888"/> </shape> 

场景示例

源码示例：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:width="match_parent" 
 ohos:height="match_parent" 
 ohos:background_element="$graphic:color_light_gray_element"> <DirectionalLayout 
 ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="vertical"> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" ohos:bottom_margin="3vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
 </DirectionalLayout> 
 <Component ohos:height="20vp"/> 
 <DirectionalLayout ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="horizontal"> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="33vp" 
 ohos:height="20vp" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> </DirectionalLayout> 
 <Component ohos:height="20vp"/> 
 <DirectionalLayout 
 ohos:width="match_parent" 
 ohos:height="20vp" 
 ohos:orientation="horizontal"> 
 <Button ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="166vp" 
 ohos:height="match_content" 
 ohos:left_margin="13vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
 </DirectionalLayout> <Component ohos:height="20vp"/> 
 <DirectionalLayout 
 ohos:width="match_parent" 
 ohos:height="60vp"> 
 <Button 
 ohos:width="50vp" 
 ohos:height="20vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="left" 
 ohos:text="Button 1"/> <Button 
 ohos:width="50vp" 
 ohos:height="20vp" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="horizontal_center" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="50vp" 
 ohos:height="20vp" ohos:background_element="$graphic:color_cyan_element" 
 ohos:layout_alignment="right" 
 ohos:text="Button 3"/> 
 </DirectionalLayout> 
 <Component ohos:height="20vp"/> 
 <DirectionalLayout 
 ohos:width="match_parent" 
 ohos:height="match_content" 
 ohos:orientation="horizontal"> 
 <Button 
 ohos:width="0vp" ohos:height="20vp" 
 ohos:weight="1" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 1"/> 
 <Button 
 ohos:width="0vp" 
 ohos:height="20vp" 
 ohos:weight="1"ohos:background_element="$graphic:color_gray_element" 
 ohos:text="Button 2"/> 
 <Button 
 ohos:width="0vp" 
 ohos:height="20vp" 
 ohos:weight="1" 
 ohos:background_element="$graphic:color_cyan_element" 
 ohos:text="Button 3"/> 
 </DirectionalLayout> </DirectionalLayout> 

color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ffeeeeee"/> 
</shape> 

color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff00ffff"/> </shape> 

color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos" 
 ohos:shape="rectangle"> 
 <solid 
 ohos:color="#ff888888"/> 
</shape>