I'm trying to write a topbar for my application that should contain mainly the app logo (a small image) and the app title (just text). Moreover, I'd like this topbar to automatically resize according to the window's height.
I'm new to QML, but I suppose that I should wrap these components inside a Row or a RowLayout component. This is my sample code:
import QtQuick 2.0
import QtQuick.Layouts 1.0
Rectangle
{
id: mainwindow
width: 1024
height: 600
Row
{
id: rowlayout
height: logoimage.height
spacing: 5
property int count: 3
anchors
{
left: parent.left
right: parent.right
top: parent.top
}
Image
{
id: logoimage
source: "qrc:/images/resources/images/icon.png"
height: mainwindow.height / 20
anchors.top: parent.top
anchors.left: parent.left
}
Text
{
id: logotext
text: qsTr("This is my logo text")
font.pixelSize: parent.height
font.family: "Sans Serif"
height: parent.height
verticalAlignment: Text.AlignVCenter
anchors.top: parent.top
anchors.left: logoimage.right
}
/*
Rectangle
{
id: otherrect
height: parent.height
color: "lightgreen"
anchors.top: parent.top
anchors.left: logotext.right
anchors.right: parent.right
}
*/
}
}
I tell to the Row component that its height should follow the logo's height, and to the Image (logo) component that its height should be 1/20th of the Rectangle (mainwindow) component.
Using a Row container, the code behaves as expected but I get an annoying warning (QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) and I have to do a lot of anchoring. Conversely, if I use a RowLayout container, I can remove most of the anchors but the Image completely ignores its height attribute (but the text still resizes correctly). So the questions are:
is this a bug of the RowLayout component? I'm using Qt-5.1.0-Beta with Android support, so this could be an explanation
how can I use a Row component without using anchors in its children and thus avoid the warning?
I'm missing something important or I'm almost on the right track but I have to bear with this beta of Qt until a stable version is released?
You said that you get the expected behavior with Row, so you should probably use it. The warning that Row is giving is asking you to remove the vertical anchors (top and bottom) from its child elements.
The Row element provides horizontal (left and right) anchor-like behavior for its child elements, but it doesn't mind if you use top and bottom anchors (notice that top and bottom were not in the warning).
In other words remove "anchors.left" and/or "anchors.right" lines from "logoimage", "logotext", and "otherrect" (if you plan on uncommenting it at some point), but not the "anchors.top" lines, and that should stop the warning and keep the correct behavior.
An alternative is to just remove the Row element and use Item or FocusScope (if you plan on having input elements in your "top bar" area), which will not try to take over anchoring operations, and that may be a better fit for you if you really like anchors.
You need to give a width to your layout if you want it to strecht its children, either with width: parent.width, or better, with anchors { left: parent.left; right: parent.right } and no anchors on vertical lines inside childrens of the layout.
1) NO, it is no a bug of RowLayout
2) Consider that RowLayout is preferred to Row because is most expressive for components placing. The Row component is better that Rowlayout only for graphics or animation apps
3) The stable version is now available, but your errors are not bugs ;)
Related
How to layout views in SwiftUI in such way
I have input fields that I want to stretch to fill available space
This inputs are placed in VStack in such way that I am giving them frame(height: 40)
This VStack is inside white box which has frame(maxHeight: geometry.size.height * 0.8)
And the last white box is not adjusting to number of inputs in for VStack but rather takes 0.8 space and then this inputs are spread inside VStack instead (more spacing than needed is added.
I do not understand why such thing is happening.
FormView()
.frame(
maxWidth: geometry.size.width * 0.85,
maxHeight: geometry.size.height*0.85
)
Form View contains:
VStack(spacing: 4) {
FormInput(label: "First Name", input: self.$firstName) {
isEditing in
self.avoider.editingField = 0
}
.frame(height: 40)
.padding(0)
.avoidKeyboard(tag: 0)
I found the reason why sometimes View (layout) does not collapse to take smallest possible space, but instead expands to maxHeigh/maxWidth.
It happens when somewhere in between we use
GeometryReader { geometry in
VStack { ... }
}
Then those Views does not collapse and spread to maxHeight. I have this GeometryReader used inside .avoidKeyboard(tag: 0)
I also experienced this issue but managed to fix it by specifying idealHeight instead maxHeight and also adding a minHeight. So your example would be something like:
FormView()
.frame(
maxWidth: geometry.size.width * 0.85,
idealHeight: geometry.size.height * 0.85,
minHeight: geometry.size.height * 0.6
)
On a device with enough space, the ideal height will be used, on smaller devices the height will shrink but not to less than minHeight.
According to the react-virtualized docs, "The AutoSizer component decorates a React element and automatically manages width and height properties so that decorated element fills the available space".
The suggestion is usually to add height: 100%; or flex: 1; to all parent elements in the DOM to render the table's full height.
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
Say our table has many rows of varying height and exceeds 100vh when rendered. Autosizer will return a height in pixels that equals 100vh, as a maximum, meaning the last rows in our table will be cutoff as AutoSizer will not stretch its parents height to render all rows.
My current workaround is to use <CellMeasurer /> and CellMeasurerCache() to manually determine table height from this.cache; // (component instance of CellMeasurerCache) using private properties, for example in my table component:
componentDidUpdate = () => {
const { tableHeight } = this.state;
const tableRowHeights = Object.values(this.cache._rowHeightCache);
const newRowsHeight = tableRowHeights.reduce(
(height, nextRowHeight) => height + nextRowHeight,
0
);
if (tableHeight !== newRowsHeight) {
this.setState({ tableHeight: newRowsHeight });
}
}
Is there no way to accomplish this with react-virtualized components and APIs,without accessing private properties from the CellMeasurerCache() instance?
What if one of those elements, e.g. an absolutely positioned full page overlay container, has height: 100vh; overflow: scroll; ?
In this case, the Table's parent height is 100vh, but allows overflow if the children have height greater than 100vh.
I don't think this (overflow behavior) make sense in the case of react-virtualized. In most cases- unless you're using WindowScroller for a Facebook/Twitter like layout- react-virtualized components should manage their own scrolling.
So in that case, if 100vh height is available, you would want RV to fill exactly that amount and- if there's more content than will fit into that area- (which is likely, if you're using RV in the first place)- it will setup the scrolling styles within itself.
On the other hand, if you tell a react-virtualized component that its height is numRows * rowHeight then it's going to render everything, and completely defeat the purpose of windowing. :)
I am looking for a way to space (and move in general) objects inside a group regardless of their transformation.
In the small example i have made below, you will see 2 circles and I am attempting to space them by a certain factor.
It is ok until I rotate or resize the group and it is still ok the very first time the coordinates are changed after a transformation but calling the same function twice while the spacing is still correct, the group starts jumping all over the places..
I am using Fabric JS version: 1.7.7
Here is a sample:
https://jsfiddle.net/u0patgck/
console.clear();
var canvas = new fabric.Canvas('root');
var circles = [];
circles.push(new fabric.Circle({id: "circle1", radius: 20, fill: 'green', left: 150, top: 100}));
circles.push(new fabric.Circle({id: "circle2", radius: 20, fill: 'green', left: 200, top: 100}));
g = new fabric.Group(circles);
//once circles are added to group their coordinates change so I store their new original base coordinates in custom variables
g.forEachObject(function(obj){
obj.originalLeft = obj.getLeft();
obj.originalTop = obj.getTop();
}, g);
canvas.add(g);
canvas.renderAll();
function moveCircles(){
var space = parseFloat(document.getElementById("spacingPixels").value);
g.forEachObject(function(obj){
switch (obj.id){
case "circle1":
obj.setLeft(obj.originalLeft - space)
break;
case "circle2":
obj.setLeft(obj.originalLeft + space)
break;
default:
}
})
g.addWithUpdate();
canvas.renderAll()
}
Steps to Reproduce:
Test 1 (ok):
Click the "Move Circles" button as many times you want (circles coordinates are recalculated and the group is not "misbehaving".
Test 2 (ok first time but not second time):
Rotate the group first.
Click the move circles button ONE time (all is still good)
Click the move circles button another time (you will see the group starts moving by itself around the canvas).
Expected Behaviour:
The group should not move around or change the order of the objects inside.
The group moves erratically.
At the moment I am caching the transformations manually and restoring them after changing the coordinates (like below)
https://jsfiddle.net/0tdg1dof/
var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);
g.addWithUpdate();
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);
Is there a better way to do this?
Thank you.
AlessandroDM, I believe you did right solution, because you are manipulating just only group object. If you will not manipulate (restore) group objects (parent) you will need to do manipulation each child inside the group like angle, scale, etc. Also, you have one minor bug, if you will rotate group, and after that resize it (not diagonal controls, scaleX should not be equal to scaleY) and then click "Move Circles" your group will behave as you described in Test 2. In order to fix that you will need to set scaleX and scaleY values after all your values which you want to set:
var a = {scaleX: g.getScaleX(), scaleY: g.getScaleY(), skewX: g.getSkewX(), skewY: g.getSkewY(), flipX: g.getFlipX(), flipY:g.getFlipX(), angle: g.getAngle()};
fabric.util.resetObjectTransform(g);
g.addWithUpdate();
g.setSkewX(a.skewX);
g.setSkewY(a.skewY);
g.setFlipX(a.flipX);
g.setFlipY(a.flipY);
g.setAngle(a.angle);
g.setScaleX(a.scaleX);
g.setScaleY(a.scaleY);
It is not a fabricjs bug setting scale after all manipulations, even native HTML5 canvas required scaling after all manipulations.
I have a layout where I need to control the line height between wrapped non block level elements:
<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>
What I want to achieve is something like:
I don't want to rely on absolute positioning as there will be elements beneath which need to clear this and simply setting a low line-height on he paragraph results in an object which breaks out of its box, see the Fiddle below:
http://jsfiddle.net/mdHKy/2/
Any ideas?
You can first give the p a height then set its line-height to half that amount (being 2 lines).
p.payments {
line-height: 1em;
height:2em;
}
Then set the line-height of small to 1em and give that a vertical-align:
p.payments small {
line-height:1em;
vertical-align:top;
}
Then set the vertical-align of your .light:
p.payments small.light {
vertical-align:baseline;
}
JSFiddle example.
Please note: This question relates to the Appcelerator Titanium platform, not the stock iOS SDK.
I'm making a tag cloud with a layout: horizontal view. I'm most of the way there, but I can't get the final Titanium.UI.Label on a line to wrap if it doesn't fit. Instead, it gets ellipsized (in a useless manner).
Is there a way I can prevent this on iOS? Seems to work fine on Android.
If you try to set the label width to auto, Titanium will calculate the label width in runtime.
It make sense to get a ellipsized label in horizontal view.
You may need to determine the dynamic label width in your tag cloud case. But just leave it to titanium, you just need to change the dynamic width to static width with this tricky code.
for (var i = 0; i < data.length; i++) {
var label = Ti.UI.createLabel({ text: data[i], width: 'auto', height: 20,left: 5, top: 5});
label.width = label.width + 5; //this determine width in runtime assign back to static width
view.add(label);
}
The iPhone's answer to this is minimumFontSize but that makes no sense in a tag cloud... Have you considered adding this to a horizontal scrollview and setting the contentWidth to auto?
Also does each of your label have it's width set to 'auto'? I imagine setting that would cause the word to overflow the layout and be pushed down to the next line.