How to access delegates in different ListViews in QML or Javascript - javascript

I am QML newbie. I am trying to understand how to access selected delegates in ListView
For instance I have the following main.qml
import QtQuick 2.15
import QtQuick.Controls 2.5
import QtQuick.Window 2.15
Window {
width : 640
height : 700
visible : true
title : qsTr("Hello World")
Rectangle {
id : rect_A
anchors.left : parent.left
width : 300
height : 500
border.color : "black"
border.width : 2
ListView {
id : view_A
anchors.fill : parent
spacing : 10
model : 5
delegate : comp_1
}
}
Rectangle {
id : rect_B
anchors.right : parent.right
width : 300
height : 300
border.color : "black"
border.width : 2
ListView {
id : view_B
anchors.fill : parent
spacing : 10
model : 5
clip : true
delegate : comp_1
}
}
Component {
id : comp_1
Row {
id : row_1
spacing : 10
CheckBox {
id : checkBox
Text {
text : index
}
}
}
}
}
I would like to achieve the following behavior: when I check or uncheck the checkbox on the left, the appropriate checkbox on the right does the same.
I'm trying to understand how to address selected delegates and change their properties.
Could you help me please? I have a feeling that this should be easy but I am missing something fundamental.

This is usually done via a model defined in C++ / Python, with a role that tracks the checked state.
here is a simple example with ListModel:
import QtQuick
import QtQuick.Controls
import QtQml.Models
Item{
ListModel{id: checkable_model
ListElement {
checked: false
}
ListElement {
checked: false
}
ListElement {
checked: false
}
ListElement {
checked: false
}
}
Rectangle {
id : rect_A
anchors.left : parent.left
width : 300
height : 500
border.color : "black"
border.width : 2
ListView {
id : view_A
anchors.fill : parent
spacing : 10
model : checkable_model
delegate : MyDelegate{}
}
}
Rectangle {
id : rect_B
anchors.right : parent.right
width : 300
height : 300
border.color : "black"
border.width : 2
ListView {
id : view_B
anchors.fill : parent
spacing : 10
model : checkable_model
clip : true
delegate : MyDelegate{}
}
}
}
// MyDelegate.qml
import QtQuick
import QtQuick.Controls
Row {
required property var model
id : row_1
spacing : 10
CheckBox {
id : checkBox
checked: model.checked
onCheckedChanged:{model.checked = checked}
Text {
text : model.index
}
}
}
You can try it here

Related

how to add qml file in swipeview

I was trying to use swipe view
In swipe view i need to add qml file into it
so every swipe i need to get one qml file to show
i need to get 7 qml file in 7 swipe and i need add global property in every swipe view
I try to loader to get qml file but i am not able to add global property
Because the qml file are already used in another swipe view i need to use global property and change the value
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Page
{
id:mfcscreens
Rectangle{
height:wavescreen.height
width: wavescreen.width
SwipeView{
id:swipeview
anchors.fill:parent
currentIndex: 0
spacing: 4
Item {
id:page1
Loader{
id:mainwavescreen
source: "MfcWavefoam.qml"
}
}
Item {
id:page2
Loader{
id:leads12
source: "Leads12.qml"
Item{
property int speed: 5;
property int gain: 10;
property int xValue: 976
property int degreeValue: 143
}
}
}
Item {
id:page3
Loader{
id:leads3of1
source: "Leads3of1.qml"
}
}
Item {
id:page4
Loader{
id:leads3of2
source: "Leads3of2.qml"
}
}
Item {
id:page5
Loader{
id:leads3of3
source: "Leads3of3.qml"
}
}
Item {
id:page6
Loader{
id:leads3of4
source: "Leads3of4.qml"
}
}
Item {
id:page7
Loader{
id:leads6of1
source: "Leads6of1.qml"
}
}
Item {
id:page8
Loader{
id:leads6of2
source: "Leads6of2.qml"
}
}
}
}
}
At this stage, from what you convey in your use case, Loader isn't required. Particularly if the number of Pages in your SwipeView is static. Then, you definitely do not need to use Loader.
The following demonstrates:
A SwipeView with 3 pages
Each page in their own qml file
The parent page has a global speed, gain, xValue and degreeValue property defined which all the children Pages can view and modify
import QtQuick
import QtQuick.Controls
Page {
property int speed: 5
property int gain: 10
property int xValue: 976
property int degreeValue: 143
SwipeView {
anchors.fill: parent
MfcWaveform { }
Leads12 { }
Leads3of1 { }
}
}
// MfcWaveform.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ColumnLayout {
anchors.centerIn: parent
Text {
text: qsTr("MfcWaveform")
}
Button {
text: qsTr("Speed: %1").arg(speed)
onClicked: speed = speed + 1
}
Button {
text: qsTr("Gain: %1").arg(gain)
onClicked: gain = gain + 1
}
Button {
text: qsTr("xValue: %1").arg(xValue)
onClicked: xValue = xValue + 1
}
Button {
text: qsTr("degreeValue: %1").arg(degreeValue)
onClicked: degreeValue = degreeValue + 1
}
}
}
// Leads12.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ColumnLayout {
anchors.centerIn: parent
Text {
text: qsTr("Leads12")
}
Button {
text: qsTr("Speed: %1").arg(speed)
onClicked: speed = speed + 1
}
Button {
text: qsTr("Gain: %1").arg(gain)
onClicked: gain = gain + 1
}
Button {
text: qsTr("xValue: %1").arg(xValue)
onClicked: xValue = xValue + 1
}
Button {
text: qsTr("degreeValue: %1").arg(degreeValue)
onClicked: degreeValue = degreeValue + 1
}
}
}
// Leads3of1.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ColumnLayout {
anchors.centerIn: parent
Text {
text: qsTr("Leads3of1")
}
Button {
text: qsTr("Speed: %1").arg(speed)
onClicked: speed = speed + 1
}
Button {
text: qsTr("Gain: %1").arg(gain)
onClicked: gain = gain + 1
}
Button {
text: qsTr("xValue: %1").arg(xValue)
onClicked: xValue = xValue + 1
}
Button {
text: qsTr("degreeValue: %1").arg(degreeValue)
onClicked: degreeValue = degreeValue + 1
}
}
}
You can Try it Online!
I think, you have several problems. So start with the first one. For your SwipeView to work you should provide a PageIndicator. So add something like that below our view:
PageIndicator {
id: indicator
count: swipeView.count
currentIndex: swipeView.currentIndex
anchors.bottom: swipeView.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
You don't need to use loaders for your pages. You could just add the components directly to your items:
Item {
id:page8
// if your file name is called Leads6of2.qml and is part of your project
Leads6of2 {}
}
The part with the global property is unclear to me. Please rephrase this problem!

How can I make a difference on only one card when I make a card list by map function with React?

I want to make cards list like the 'Goal' picture. If you look at first picture, last card has only difference at price and last part. But I don't know how to make difference when I use array and map function. Should I resolve it by using conditional rendering? If I could, please let me know how to make it. I'd appreciate it if you let me know thank you.
Goal
Mine
this is Section5Bottom.jsx file. There are array and map function in this file. I erased 'people' element in last array but css still remains so it still shows little pink background-color like 'Mine' picture above
import React from 'react';
import "../section5.css";
import Section5Card from './Section5Card';
const array = [
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/324119/course_cover/07c45106-3cfa-4dd6-93ed-a6449591831c/%E1%84%80%E1%85%B3%E1%84%85%E1%85%AE%E1%86%B8%205%20%E1%84%87%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A1%204.png",
'title' : '실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발',
'name' : '김영한',
'star' : '5',
'comment' : '(1473)',
'price' : '₩88,000',
'people' : '+12400명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/324671/course_cover/638eee1a-6381-402d-a17b-3724751414f1/frontend-env-eng.png",
'title' : '프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)',
'name' : '김정환',
'star' : '5',
'comment' : '(169)',
'price' : '₩69,300',
'people' : '+2000명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
'title' : '애플 웹사이트 인터랙션 클론!',
'name' : '1분코딩',
'star' : '5',
'comment' : '(187)',
'price' : '₩77,000',
'people' : '+3200명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/327193/cover/010c8faf-bfc5-4c6a-9623-a68dc3b38697/327193-eng.png",
'title' : 'Slack 클론 코딩[백엔드 with NestJS + TypeORM]',
'name' : '조현영',
'star' : '4.5',
'comment' : '(58)',
'price' : '₩44,000',
'people' : '+1100명',
},
{
'id' : '5',
'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
'title' : '모바일 웹 퍼블리싱 포트폴리오 with Figma',
'name' : '코딩웍스(Coding Works)',
'star' : '0',
'comment' : '(0)',
'discount' : '₩132,000',
'price' : '₩92,400',
'new' : '새강의',
'sale' : '할인중'
}
]
function Section5Bottom() {
return (
<div id='Section5Bottom'>
{
array.map((a, i) => {
return (
<Section5Card products={a} key={i} />
)
})
}
</div>
)
}
export default Section5Bottom;
and this is Section5Card.jsx file. This file is imported to Section5Bottom.jsx file
import React from 'react';
import '../section5.css';
function Section5Card(props) {
return (
<div id='Section5Card'>
<img src={props.products.img} id="Section5CardImg" />
<div id='Section5CardTitle'>
{props.products.title}
</div>
<div id='Section5CardName'>
{props.products.name}
</div>
<div id='Section5CardComment'>
{props.products.comment}
</div>
<div id='Section5CardPrice'>
{props.products.price}
</div>
<div id='Section5CardPeople'>
{props.products.people}
</div>
{
props.products.new && (
<div id='Section5CardNew'>
{props.products.new}
</div>
)
}
{
props.products.sale && (
<div id='Section5CardSale'>
{props.products.sale}
</div>
)
}
</div>
)
}
export default Section5Card;
function:
const ConditionalWrapper = ({ children, condition }) => {
return condition ? (
<div>{discount price}</div>
) : (
<>{price}</>
)
}
how to use above function
<ConditionalWrapper condition={condition}>children</ConditionalWrapper>
According to the above problem. you should apply condition if discount price avaliable. if true change css for price. I mean text to gray & strike decoration. Add discount price afterward. if false return price with no additional css. like it is in the picture. I'm not fluent in English. I hope you understood. Still facing problem comment

setState in react it seems that it delete all state content

I wrote an object style and I was calling it in style of any element.
It was cool tell i wanted to edit one style value of some element, so I tried to change it like
onClick={{cardStyle.li.backgroundColor : "black }}
But that gave me a read only error, so I put the cardStyle object in state in order using setState, and now when i try to change anyvalue using setState, it seems that it only puts that value and deleted everything from it
This is the code:
import React from "react";
export default class CardInfo extends React.Component
{
constructor(props){
super(props);
this.state = { cardStyle : {
ul : {
width : '80%',
margin : '5% 10%',
listStyleType : "none",
},
li :{
width : "30%",
border : " 4px solid rgb(0, 0, 0 , 0.6) ",
borderRadius : "7%",
textAlign : "center",
paddingTop : "3%",
marginRight : '1%',
float : 'left',
backgroundColor : this.props.Fname === "MUHAMMAD" ? "rgb(255, 10, 92 , .7)" : "white",
},
img : {
width : " 80%",
borderRadius : "7%",
},
on : {backgroundColor : "black"}
}}
}
render()
{
return <ul style={this.state.cardStyle.ul}>
<li style={this.state.cardStyle.li}
onClick={() =>this.setState({cardStyle:{li:{backgroundColor : "grey"}}})} >
<img style={this.state.cardStyle.img} src={this.props.img} alt="lilpic" />
<h2>{this.props.Fname}</h2>
<p>{this.props.quetes}</p>
<p>{this.props.phone}</p>
</li>
</ul>
}
}
You are changing state and overriding it with new values, instead you should override the property you want and give rest of the properties as well. So replace your on click this.setState with
this.setState({cardStyle:{ ...this.state.cardStyle, li:{backgroundColor : "grey"}}})} >

Targeting specific component elements in QML

CSS makes it super easy to have on hover effects for specific buttons/elements in yhour DOM. I'm trying to create a landing page of sorts for a desktop app, but I'm trying to get around having to copy paste specific states for each object I create in my main.qml.
Heres my main.qml
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
NavBar
{
id: mainNavigation
}
}
NavButton.qml
Rectangle
{
id: navButton
height: parent.height
width: parent.width / 3 - 10
color: "orange"
MouseArea
{
state: "unhovered"
hoverEnabled: true
height: parent.height
width: parent.width
onHoveredChanged:
{
console.log("hovered")
if(this.state == "hovered")
{
parent.state = "unhovered"
}
else
{
parent.state = "hovered"
}
}
} // end mouse area
states:
[
State
{
name: "hovered"
PropertyChanges
{
target: navButton
width: parent.width
color: "red"
}
},
State
{
name: "unhovered"
PropertyChanges
{
target: navButton
width: parent.width
color: "orange"
}
}
]
}
NavBar.qml
import QtQuick 2.0
import QtQuick.Controls 1.4
Row
{
id: navigationBar
height: parent.height / 3
width: parent.width
spacing: 15
anchors.centerIn : parent
NavButton
{
id: selectDevice
}
NavButton
{
id: deviceConfig
}
NavButton
{
id: deviceInfo
}
}
right now when I hover over one of these navButtons all three of them expand in size, as apposed to having just the one I hovered over expand and change color. I'm hoping that like with CSS and Javascript, there's a way to target the element that is the subject of the hover event.
I've already tried used parent as the target of the states, but that doesn't seem to work. I've done a bit of hunting for a solution and I don't see anything obvious that allows me to accomplish this. the only alternative I see is to add states to each individual navButton inside my navBar file.
I really hope that isn't the case, as that would be a really verbose solution to a simple problem.
What I really need is a way to target just the element the event is occurring on.
You can simply scrap all those states and whatnot, which are really not needed for such a trivial scenario:
Rectangle {
id: navButton
height: parent.height
width: parent.width / 3 - 10
color: ma.containsMouse ? "red" : "orange"
property alias hoverEnabled: ma.hoverEnabled
MouseArea {
id: ma
anchors.fill: parent
}
}
And you save yourself a bunch of code too. Then simply have hoverEnabled: true for all buttons you want to hover.
Or you can create an auxiliary type called HoverButton.qml which is just a NavButton { hoverEnabled: true } if you want to avoid setting it for each and every button.
I would also recommend to switch the nesting order of your button:
MouseArea {
id: navButton
height: parent.height
width: parent.width / 3 - 10
Rectangle {
anchors.fill: parent
color: navButton.containsMouse ? "red" : "orange"
}
}
This avoids the need to use a property alias, saves you one id and allows you to bind to the mouse area handler hooks directly, something you cannot do in your original code without redirecting the signal with an additional handler and signal.
Finally, I don't think it will be productive to look at QML as if it is HTML, QML is not HTML, and it comes with its own usage paradigms.

How to use const in ReactJS

I have an array that I need to use twice and I don't want to repeat it in my code
const menuItems = [
{ route : 'home', text : 'Game Info' },
{ route : 'players-info', text : 'Players Info' },
{ route : 'money', text : 'Money' },
{ route : 'refunds', text : 'Refounds' },
{ route : 'videos', text : 'Videos' },
{ route : 'tips', text : 'Tips' }
];
and in the class I am doing
render () {
return <LeftNav
menuItems={menuItems} />
}
so, lets say that in another file, I want to use that same const menuItems, and render it like this
render () {
let tabs = menuItems.map((item) => {
return <Tab
key={item.route}
label={item.text}
route={item.route}
onActive={this._onActive} />
});
return <Tabs
initialSelectedIndex={0}>{tabs}
</Tabs>;
}
So, what should I do to use the const across different files?
// menuItems.js
export default const menuItems = [
{ route : 'home', text : 'Game Info' },
{ route : 'players-info', text : 'Players Info' },
{ route : 'money', text : 'Money' },
{ route : 'refunds', text : 'Refounds' },
{ route : 'videos', text : 'Videos' },
{ route : 'tips', text : 'Tips' }
];
// then you can import it like so
import menuItems from "./menuItems";

Categories

Resources