在 ScrollView 中将按钮与底部对齐

Posted 2023-04-18

【中文标题】在 ScrollView 中将按钮与底部对齐

【英文标题】：Align Button to Bottom in ScrollView

【发布时间】：2017-11-23 05:07:19

【问题描述】：

我正在尝试将按钮与 ScrollView 底部对齐并使 ScrollView 填充页面。第一张截图是它的样子，第二张是我想要的。

在截图中，没有使用 ScrollView，因为没有足够的项目，但 ScrollView 内的项目数量不固定。

渲染（）：

<ScrollView style=styles.scrollViewContainer>
      <View style=flex: 1, justifyContent: 'space-between', flexDirection: 'column'>
        <View style=flex: 1>
          <Text style=styles.bigTitle>Title</Text>
          <View style=styles.formContainer>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
        <SignupButton onPress=this.submit title="Next Step" image=require("../Images/right_btn.png") boldText=true />
      </View>
    </ScrollView>

风格：

  scrollViewContainer: 
    backgroundColor: '#fff',
  ,
  formContainer: 
    paddingTop: 10,
    paddingLeft: 50,
    paddingRight: 50,
    paddingBottom: 30,
  ,
  bigTitle: 
    fontSize: 24,
    textAlign: 'center',
    marginTop: 20,
    marginBottom: 20,
  ,

【问题讨论】：

为了清楚起见，如果表单 足够大以滚动，您希望按钮始终固定，还是随内容滚动？

不，它不应该被修复。它应该在卷轴的末尾。

仅供参考：您可以使用 contentContainerStyle 删除内部包装 View。 See docs.

尝试在滚动视图中使用 contentContainerStyle= flex:1

什么是样式块？那是CSS吗

【参考方案1】：

您可以查看我对类似问题的回答。链接在这里。

How to make component stick to bottom in ScrollView but still alow other content to push it down

【讨论】：

谢谢，使用flexGrow 解决了这个问题:)

【参考方案2】：

尝试将 justifyContent:'space-between' 和 flex:1 添加到 contentContainerStyle 到 ScrollView

  <ScrollView style=style.container contentContainerStyle=[flex:1,justifyContent:'space-between'] >
    <LIST />
    <Button />
  </ScrollView>

【参考方案3】：

如果你的父级是Relativeandroid:layout_alignParentBottom="true"，你可以把它从ScrollView中取出并确保它在底部 到您的 SignUpbutton，如果它是 LinearLayout，请确保这是 xml 中的最后一个视图，并且 LinearLayout 的高度正在填充屏幕，如果是 FrameLayout，那么我相信您需要将重力设置为底部 :)

<SomeLayout>
    <ScrollView style=styles.scrollViewContainer>
      <View style=flex: 1, justifyContent: 'space-between', flexDirection: 'column'>
        <View style=flex: 1>
          <Text style=styles.bigTitle>Title</Text>
          <View style=styles.formContainer>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
            <Text>Hello</Text>
          </View>
        </View>
      </View>
    </ScrollView>
        <SignupButton onPress=this.submit title="Next Step" image=require("../Images/right_btn.png") boldText=true />
</SomeLayout>

SomeLayout 是RelativeLayout 或LinearLayout 或您使用的任何其他布局...

【讨论】：

感谢您的回答，但这次按钮始终显示在底部。我想要的按钮是在 ScrollView 的末尾。