Question

我在一个headerToolbar中有多个控件。我想在最右边对齐其中一个（Seach Field）。两个图像都来自两种不同的屏幕尺寸。我使用是因为当我减小屏幕尺寸时，seachfield不应该隐藏并进入下一行。我想最好保持搜索领域。这个代码是

<headerToolbar>
<Toolbar id="dsdfgfanfgjd">
    <content>
        <HBox width='100%' wrap='Wrap'>
            <items>
                <FormattedText class="customPanelHeader"
                    htmlText=""/>
                <ToolbarSpacer>
                    <layoutData>
                        <OverflowToolbarLayoutData priority="NeverOverflow" minWidth="22px"/>
                    </layoutData>
                </ToolbarSpacer>
                <SearchField id="searchFilter"  placeholder="filter value" value="{/searchFilter}" width="12em"
                    liveChange=".onChangedSearchFilter" valueLiveUpdate="true"/>
            </items>
        </HBox>
    </content>
</Toolbar>

Answer 1

要将SearchBox保持在右端而不考虑屏幕大小，请使用以下代码：

<Toolbar height='auto'>
                <content>
                    <HBox width='100%' wrap='Wrap'>
                        <items>
                            <Text text='text0' width='3rem' />
                            <Text text='text1' width='3rem' />
                            <Text text='text2' width='3rem' />
                            <Text text='text3' width='3rem' />
                            <Text text='text4' width='3rem' />
                            <Text text='text5' width='3rem' />
                            <Text text='text6' width='3rem' />
                            <Text text='text7' width='3rem' />
                            <Text text='text8' width='3rem' />
                            <Text text='text9' width='3rem' />
                            <Text text='text10' width='3rem' />
                            <Text text='text11' width='3rem' />
                            <Text text='text12' width='3rem' />
                            <ToolbarSpacer></ToolbarSpacer>
                            <HBox justifyContent='End'>
                                <layoutData>
                                <FlexItemData
                                    growFactor='1'>
                                </FlexItemData>
                                </layoutData>
                                <Input id="searchFilter" class="searchFilterInput"
                                placeholder="filter value" value="{/searchFilter}" width="100%"
                                liveChange=".onChangedSearchFilter" valueLiveUpdate="true" />
                            <core:Icon class="searchFilterIcon" size="1.75rem"
                                src="sap-icon://search" tooltip="search" />
                            </HBox>
                        </items>
                    </HBox>
                </content>
            </Toolbar>

如何在headerToolbar SAPUI5中对齐控件

1 个答案: