在ScrollView中将按钮对齐到底部

Question

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

在这些截图中，由于项目数量不足，因此未使用ScrollView，但是ScrollView内部的项目数量并不固定。

Render（）：

<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,
  },

- Naim Berk Tumer

---

为了清晰起见，如果表单足够大而需要滚动，您希望按钮始终固定还是随内容一起滚动？ - G0dsquad

不，它不应该被固定。它应该在滚动条的末尾。 - Naim Berk Tumer

FYI：您可以使用 contentContainerStyle 来移除内部包装的 View。请参阅文档。 - Michael Cheng

尝试在ScrollView中使用contentContainerStyle={{ flex:1 }}。 - Ankit Aggarwal

什么是样式块？那是CSS吗？ - IgorGanapolsky

Answer 1

您可以查看我在类似问题上的答案。这是链接。

如何使组件在ScrollView中保持底部，但仍允许其他内容将其推向下方

- Ijharul Islam

---

谢谢，使用 flexGrow 解决了问题 :) - Naim Berk Tumer

Answer 2

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

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

- A-J-A

Answer 3

这里你只需要把它从ScrollView里取出来，确保它在底部，如果父布局是RelativeLayout，就给它的SignUpbutton添加android:layout_alignParentBottom="true"属性；如果是LinearLayout，确保它是xml中最后一个View，并且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 或者你正在使用的任何其他布局...

- Ariel Yust

---

谢谢您的回答，但是这次按钮将始终可见于底部。我想要的是让按钮位于ScrollView的末尾。 - Naim Berk Tumer