gpt4 book ai didi

android - 通过flexbox实现android Linearlayout权重效果

转载 作者:太空宇宙 更新时间:2023-11-04 05:42:59 25 4
gpt4 key购买 nike

我想通过 flexbox 实现下面的 android 布局。
android 布局 xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="400px"
android:layout_height="200px"
android:background="#0ee"
android:gravity="center_vertical"
android:orientation="horizontal">

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:text="TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:text="TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT"/>

</LinearLayout>

<View
android:layout_width="100px"
android:layout_height="50px"
android:background="@color/red" />

</LinearLayout>

效果:
enter image description here

如何修改下面的代码来达到上面的效果?
ps:如果我指定了 vertical 类的宽度,它就可以工作,还有其他方法可以实现吗?

<html>
<header>
<style>

.container {
width: 400px;
height: 200px;
display: flex;
flex-direction: row;
align-items: center;
background: teal;
}

.vertical {
display: flex;
/* width: 100px; I don't want to specify the width*/
flex: 1;
flex-direction: column;
}

p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.button {
width: 100px;
height: 50px;
background: red;
}

</style>
</header>

<body>
<div class="container">

<div class="vertical">
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</div>

<div class="button">

</div>
</div>
</body>
</html>

最佳答案

您需要将min-width: 0; 添加到.vertical 元素

<html>
<header>
<style>

.container {
width: 400px;
height: 200px;
display: flex;
flex-direction: row;
align-items: center;
background: teal;
}

.vertical {
display: flex;
min-width: 0;
flex: 1;
flex-direction: column;
}

p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.button {
width: 100px;
height: 50px;
background: red;
}

</style>
</header>

<body>
<div class="container">

<div class="vertical">
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
<p>TTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT</p>
</div>

<div class="button">

</div>
</div>
</body>
</html>

https://codepen.io/withn/pen/RwwOmKm

问题与文本在 flexbox 子项中的包装方式有关。

更多信息在这里:https://css-tricks.com/flexbox-truncated-text/

关于android - 通过flexbox实现android Linearlayout权重效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58990667/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com