Question

我想创建一个带有ScrollView的屏幕，其中包含一些输入字段，并在屏幕底部创建一个Button（实际上是普通View中的2个按钮）。这应该很容易，但是， 我想将按钮放置在屏幕的最底部 ，即使ScrollView中没有足够的元素来填充整个屏幕屏幕。我可以使用绝对定位，但是ScrollView可以比屏幕更大（更高），在这种情况下，按钮应该位于ScrollView的末尾。（因此它将显示在屏幕之外，这意味着用户应向下滑动才能看到按钮）。

我尝试了很多事情，但是Button总是紧随ScollView中的其他元素之后。

在图片中，滚动视图具有蓝色边框，而包含按钮的普通视图具有黑色边框。

任何建议都值得赞赏。

Answer 1

找到最佳解决方案。

键是 contentContainerStyle 属性（文档：https://facebook.github.io/react-native/docs/scrollview#contentcontainerstyle）。 “这些样式将应用于包装所有子视图的滚动视图内容容器。”

在contentContainerStyle中设置 flexGrow：1，justifyContent：'space-between'，flexDirection：'column'后，可以将 justifyContent：'flex-start'设置为上方带有文本的容器视图，以及 justifyContent：'flex-end'包含按钮的下部容器视图。

        <ScrollView
          contentContainerStyle={{ flexGrow: 1, justifyContent: 'space-between', flexDirection: 'column' }}
          style={{backgroundColor: 'white', paddingBottom: 20}}>
          <View style={{ flex: 1, justifyContent: 'flex-start' }}>
              <Text>Some text with different length in different cases, or some input fileds.</Text>
          </View>
          <View style={{ flex: 1, justifyContent: 'flex-end' }}>
            <View>
              <TouchableOpacity
                style={[commonStyles.greenButton, styles.buttonPadding]} >
                <Text style={commonStyles.greenButtonTitle}>Next</Text>
              </TouchableOpacity>
            </View>
            <View>
              <TouchableOpacity
                style={styles.cancelButtonContainer} >
                <Text style={styles.cancelButton}>Cancel</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>

Answer 2

我找到了解决方法。

主要思想是使用文本和输入字段设置视图的高度，以精确匹配屏幕高度减去包含按钮的视图的高度。

面临的挑战是计算该高度。 Abhishek Kumar的回答对我有所帮助（https://stackoverflow.com/a/41398953/4109477）参见下面的代码：

         import { View, ScrollView, Text, TouchableOpacity, Dimensions } from 'react-native';

         const screenHeight = Dimensions.get('window').height;

          class MyClass extends React.Component {

          constructor(props) {
            super(props);
            this.state = {buttonViewHeight: 0};
          }

          find_dimesions(layout){
            this.setState({buttonViewHeight: layout.height});
          }
          render() {
            return (
              <View style={{minHeight: screenHeight, flex: 1, alignItems: 'center'}}>
                <ScrollView style={{minHeight: screenHeight}}>
                 <View style={{minHeight: screenHeight}}>
                    <View style={{minHeight: screenHeight - this.state.buttonViewHeight, borderWidth: 2, borderColor: 'red', alignItems: 'center', flex: 1}]}>
                      <Text>Some text with different length in different cases, or some input fileds.</Text>
                    </View>
                    <View onLayout={(event) => { this.find_dimesions(event.nativeEvent.layout) }} style={{paddingBottom: 50, flex: 1, borderWidth: 2, borderColor: 'green'}}>
                      <TouchableOpacity
                        style={[commonStyles.greenButton, styles.buttonPadding]} >
                        <Text style={commonStyles.greenButtonTitle}>Next</Text>
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={styles.cancelButtonContainer} >
                        <Text style={styles.cancelButton}>Cancel</Text>
                      </TouchableOpacity>
                    </View>
                  </View>
                </ScrollView>
              </View>
          }
   }

在下面的图片上您可以看到结果

由于视图高度的变化，此解决方案将在视图多次渲染时产生类似动画的效果。打开屏幕时，按钮的视图“淡入”。

如果您找到更好的解决方案，请告诉我！

Answer 3


import io.flutter.app.FlutterApplication
import io.flutter.plugin.common.PluginRegistry
import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback
import io.flutter.plugins.pathprovider.PathProviderPlugin
// Add this line
import io.flutter.plugins.firebase.cloudfirestore.CloudFirestorePlugin;
import io.flutter.view.FlutterMain
import rekab.app.background_locator.LocatorService

class Application : FlutterApplication(), PluginRegistrantCallback {
    override fun onCreate() {
        super.onCreate()
        LocatorService.setPluginRegistrant(this)
        FlutterMain.startInitialization(this)
    }

    override fun registerWith(registry: PluginRegistry?) {
        if (!registry!!.hasPlugin("io.flutter.plugins.pathprovider")) {
            PathProviderPlugin.registerWith(registry!!.registrarFor("io.flutter.plugins.pathprovider"))
        }
// Add this section
        if (!registry!!.hasPlugin("io.flutter.plugins.firebase.firestore")) {
CloudFirestorePlugin.registerWith(registry!!.registrarFor("io.flutter.plugins.firebase.firestore"))
        }
        
    }
}

如何将视图放置在ScrollView的底部？

3 个答案: