1# 如何实现流式布局
2## 场景介绍
3流式布局是一种自适应布局，在一些无法确定界面元素尺寸的布局中，根据各个元素的尺寸进行自适应布局。
4
5## 效果呈现
6本例效果呈现如下：
7![](figures/Flex.gif)
8## 运行环境
9本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：
10- IDE: DevEco Studio 4.0 Release
11- SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)
12
13## 实现思路
14本例包含的关键操作及其实现方案如下：
15- 输入和添加文本数据：通过TextInput组件实现文本的输入和通过UNshift()方法实现文本的添加。
16- 实现流式布局：通过Flex组件实现。
17
18## 开发步骤
191. 在输入框输入文本：在主界面中自定义一个SearchInput的子组件，使用Flex作为容器组件，默认水平排列，通过TextInput作为输入组件。定义一个变量Input，存储输入框的内容，定义一个变量searchArr，表示FlexLayout要显示输入的新增文本内容。在通过onClick()事件将Input的值通过unshift()方法存放带searchArr的首位(trim())。具体代码如下：
20    ```ts
21    @Component
22    export default struct SearchInput{
23      @State input:string = '';
24      @Link searchArr:Array<string>
25
26      build(){
27        Flex({alignItems:ItemAlign.Center}){
28          TextInput({
29            placeholder:'请输入...',
30            text:this.input
31          })
32            .placeholderColor('#787F87')
33            .placeholderFont({size:'12fp'})
34            .height('5.1%')
35            .width('81.1%')
36            .backgroundColor(Color.White)
37            .margin({left:'12vp',right:'15vp',top:'8vp',bottom:'8vp'})
38            .border({width:'1vp',color:'#33182431',radius:'20vp',style:BorderStyle.Solid})
39            .onChange((value:string)=>{
40              this.input = value;
41            })
42          Text('添加')
43            .fontSize('16fp')
44            .fontColor('#007DFF')
45            .height('5.1%')
46            .onClick(()=>{
47              if (this.input !== ''&& this.input.trim().length>0){
48                this.searchArr.unshift(this.input.trim());
49              }
50              this.input = '';
51            })
52        }
53        .width('100%')
54      }
55    }
56    ```
572. 流失布局的实现：自定义一个FlexLayou的子组件，Flex作为容器组件，Flex.Wrap自适应布局，通过ForEach遍历变量searchArr使其显示。具体代码如下：
58    ```ts
59    @Component
60    export default struct FlexLayout {
61      @Link searchArr :Array<string>;
62      build(){
63        Scroll(){
64          Flex({justifyContent:FlexAlign.Start,wrap:FlexWrap.Wrap}){
65            if (this.searchArr.length>0){
66              ForEach(this.searchArr,(item:string)=>{
67                Text(`${item}`)
68                  .fontSize("12fp")
69                  .borderStyle(BorderStyle.Solid)
70                  .borderWidth('1vp')
71                  .borderColor('#E5E8EA')
72                  .borderRadius('20vp')
73                  .backgroundColor('#E5E8EA')
74                  .padding({top:'0.8%',bottom:'0.8%',left:'4.4%',right:'4.4%'})
75                  .margin({top:'10vp',right:'10vp'})
76                  .textOverflow({overflow:TextOverflow.Ellipsis})
77                  .maxLines(2)
78              },(item:string)=>JSON.stringify(item))
79            }
80          }
81          .margin({left:'12vp',right:'12vp'})
82          .padding({bottom:'12vp'})
83        }
84      }
85    }
86    ```
87
883. 主页面添加文本数据：调用FlexLayout组件、SearchInput组件，定义数组变量searchArr用来存放默认文本和输入的文本，使用$将父组件的变量与添加的文本数组关联起来。具体代码如下：
89    ```ts
90    import SearchInput from '../view/SearchInput';
91    import FlexLayout from '../view/FlexLayout';
92    import SearchViewModel from '../viewmodel/SearchViewModel'
93
94    @Entry
95    @Component
96      struct HomePage {
97      @State searchArr:Array<string>=SearchViewModel.getSearchArrData()
98      build() {
99        Column(){
100          SearchInput({searchArr:$searchArr})
101          FlexLayout({searchArr:$searchArr})
102        }
103        .height('100%')
104        .width('100%')
105        .alignItems(HorizontalAlign.Center)
106        .backgroundColor('#F1F3f5')
107      }
108    }
109    ```
110
1114. 原数据建立：定义获取原数据的函数getSearchArrData()。具体代码如下：
112    ```ts
113    export  class SearchViewModel{
114      getSearchArrData(){
115        let listItems:Array<string>=[
116          'Flex','Swiper','Slider','Image',
117           'Switch','Checkbox','ScrollView',
118           'Row','Column'
119        ];
120        return listItems;
121      }
122    }
123    export default new SearchViewModel();
124    ```
125
126## 完整代码
127上述开发步骤的具体示例代码即为本场景的全部代码
128
129## 参考
130[Flex](../application-dev/reference/apis-arkui/arkui-ts/ts-container-flex.md)
131
132[TextInput](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md)