如何使用弹性框均匀分布图像和子元素？

Posted 2023-02-19

【中文标题】如何使用弹性框均匀分布图像和子元素？

【英文标题】：How to distribute Image and child elements evenly using flex box?

【发布时间】：2018-06-10 19:30:44

【问题描述】：

我在 react-native 应用程序中将图像和一些文本输入 (FloatLabelTextInput) 添加到 <View>。到目前为止，我没有太多运气使用 flex 属性在 y 轴上均匀地间隔图像和文本输入。 由于图像显示的高度太小，而剩余的 FloatLabelTextInput 在 y 轴上占据了太多的高度。

我已经在 Expo react-native 沙箱中测试并模拟了应用程序的视图，以供在此处使用我使用的相同 CSS 进行参考：

1 图像截断和文本输入占用过多高度： https://snack.expo.io/rydGFtHQG

2 图像显示正确，但 ext 输入占用过多高度： https://snack.expo.io/HyS1VYU7f

我也尝试将 flex 属性设置为整体 flex 的一部分， 但这不会调整视图中元素间距的宽度或高度。

问题：

如何使用 flex box 均匀分布 Image 和子元素？

提议的布局：（这是我的目标布局，Image 占据了完整的 View 宽度和 40% 的高度显示完整的图像，而 Image 下方的三个 TextInputs 又占据了 40%高度为 20px)

渲染的内容：（这是使用这种布局样式渲染的内容，Image 占 View 的 10% 左右，被截断。而剩下的三个 TextInput 占 View 的 50% 左右，并且每个高度约 50 像素，对于此布局来说太高了。

查看样式定义：

const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection:"column",
    //alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#ecf0f1'
  ,
  image: 
    flex: 2/4,
    resizeMode: 'contain',
    width: 800,
    height: 800,
  ,
  floatLabelTextInput: 
    flex: 2/4,
    padding: 8,
  ,
);

【问题讨论】：

不要问我为什么，但似乎 flexDirection: 'row' 做了这件事：-O

我之前确实尝试过 flex direction:'row' 但这会导致图像和文本框出现在我的物理设备上的一行中。

我认为 Ian Mundy 已经确定了以下主要问题。您必须将图像的 flex 属性设置为 1 才能解决此问题。另外，我建议设置width: auto 并删除图像的height 属性。结果：snack.expo.io/r1BKq-Umz（使用不同的图像）。

如果您使用普通的TextInput 而不是FloatLabelTextInput，您将不会遇到这些问题。例如，snack.expo.io/SyxtAWIQf .

这是否与您的想法相似？ snack.expo.io/BJAlhYImM

【参考方案1】：

看起来 react-native-floating-label-test-input 的 the source 将您传入的样式道具应用到它维护的 TextInput 中，这将与 flex 属性的行为不同应用于外容器View。

我猜你实际上并不希望TextInput 是那个大小，因为它会导致输入与图像大小相同。如果我正在处理这个问题，我可能会给输入一个固定的高度，然后将 flex 样式应用于 Image。或者如果我知道图像的大小，我也可以给它一个固定大小。

编辑：还值得注意的是，该包does have flex: 1 set 中的View 容器可能会引起一些麻烦，除非您将它们嵌套在您自己的View 中，您可以在其中控制height 和/或@ 987654329@.

【讨论】：

我认为您已经确定了主要问题 - 具体来说，FloatLabelTextInput 包中的 flex 属性设置为 1。

我已经破解了它的图像布局，但正如你在FloatLabelTextInput 中指出的那样，高度太大了。我确实尝试在 seylt 定义中的每个上设置一个明确的height: '40'，但这对输入高度没有影响。有什么想法吗？

【参考方案2】：

我不太确定我是否得到了你想要在这里实现的目标，但是看看那个 2/4 图像和 2/4 文本输入，以及从这一行 So far I'm not having much luck spacing the image and text inputs evenly on the y-axis 我相信您希望图像占据行的 50%，而 3 个文本输入共同占据剩余的 50%。

您可以从react-native 导入Dimensions 并执行const ScreenWidth = Dimensions.get('window').width; 然后用maxWidth防止图片太大

这是我的代码的 SnackExpo。 https://snack.expo.io/HJXemkUXM

也许你可以在油漆或其他东西上做一个速写，向我们展示你想要的东西在哪里以及你想要它的外观。

const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: 'row',
    // alignItems: 'center',
    // justifyContent: 'space-between',
    backgroundColor: 'lightgreen',
    maxWidth: ScreenWidth,
    paddingTop: 25,
  ,
  image: 
    maxWidth: ScreenWidth*0.50,
    height: 200,
    // flex: 2/4,
    // resizeMode: 'contain',
    // width: 800,
    // height: 800,
  ,
  floatLabelTextInput: 
    // flex: 2/4,
    // padding: 8,
  ,
);

【讨论】：

我在问题中添加了我提议的布局的模型，更多的是列布局而不是行。我可以得到正确的图像比例，但是当我将 height 添加到样式时，FloatLabelTextInput 似乎不接受它。

我设法通过使用您从 floatLabelTextInput 中删除 flex 并使用 ScreenWidth 调整图像大小的建议来纠正布局。似乎是一种更好的方法，包括 @Ian Mundy 提到的 floatLabelTextInput 在所有情况下都将 flex 设为 1。

很高兴您能够从我给您的内容中找到解决方案！现在我知道 floatLabelTextInput 存在！