Qt/QML Eine ScrollBar für ein TextField erstellen?

Hey,

ich möchte eine ScrollBar in Qt für ein TextField erstellen. Außerdem soll wenn man Text auswählt den man eingegeben hat und Rechts-Klick macht, ein Pop Up Menü angezeigt werden bei dem man Optionen wie z.B "Einfügen" oder "Kopieren" hat.

Wenn ich den Folgenden Code ausführe bekomme ich 2 Fehler:

qrc:/main.qml:89:26: QML Rectangle: Binding loop detected for property "implicitWidth"
qrc:/main.qml:89:26: QML Rectangle: Binding loop detected for property "implicitHeight"

Hier die main.qml:

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
   id: mainWindow
   visible: true
   width: 900
   height: 600
   title: qsTr("Hello World")
    
    
   TextField {
       id: textFieldForURL
       width: parent.width/2
       height: parent.height/14
       y: parent.height/4
       x: -scrollBar1.position * width
    
       anchors.centerIn: parent
       leftPadding: 8
       topPadding: 4
       rightPadding: 43
    
       color: "white"
       font.pixelSize: parent.height/20
       selectionColor: "#3b3d45"
       placeholderText: "Type something"
       placeholderTextColor: "#3b3f44"
       selectByMouse: true
       maximumLength: 1000
  
       background: Rectangle {
          id: textFieldForURL_Background
          color: "black"
          radius: 5
  
          Rectangle {
             id: clearTextFieldForURL_Background
             width: parent.height
             height: parent.height
             anchors.right: parent.right
             color: "black"
          }
       }
  
      Text {
         id: clearTextFieldForURL
         height: parent.height
         width: parent.height
         text: "X"
         color: "white"
         font.pixelSize: 30
         anchors.right: parent.right
         leftPadding: 13
  
         MouseArea {
            id: clearTextFieldForURL_MouseArea
            height: textFieldForURL.height
            width: textFieldForURL.height
            hoverEnabled: true
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
  
            onClicked: {
               textFieldForURL.text = ""
               textFieldForURL.forceActiveFocus()
            }
            onEntered: {
               clearTextFieldForURL_Background.color = "#2a2c30"
            }
            onExited: {
               clearTextFieldForURL_Background.color = "black"
            }
         }
      }

      ScrollBar {
         id: scrollBar1
         hoverEnabled: true
         active: hovered || pressed
         orientation: Qt.Horizontal
         size: textFieldForURL_Background.width / textFieldForURL.width

         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom

         contentItem: Rectangle {
            implicitWidth: parent.width
            implicitHeight: parent.height
            radius: width / 2
            color: scrollBar1.pressed ? "white" : "#999999"
         }
      }
   }
}

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Programm, programmieren

17.03.2019, 15:29

Hast du dir schon einmal die Beispiele in der Dokumentation angeschaut, z.B. das unter Non-attached Scrollbars? Aber wo ich mir deinen Code gerade so anschaue, wundere ich mich: Ein Text in einem TextField? Nimm doch gleich eine TextArea-Komponente und pack diese in ein ScrollView (Beispiel).

Bezüglich des Kontextmenüs schau hier.

Jxnnyxx

Beitragsersteller

17.03.2019, 16:09

Ich benutze in meinem Projekt anstatt dem Text im TextField ein Image, ich habe den Code extra etwas kürzer gemacht damit er übersichtlicher ist.

Das Kontextmenü habe ich erstellt bekommen. Das was nicht geht ist die ScrollBar.. wird zwar angezeigt aber funktioniert nicht. Ich habe mir die Dokumentation von Non-attached Scrollbars angeschaut

Jxnnyxx

Beitragsersteller

17.03.2019, 22:04

@Jxnnyxx

Habe es jetzt doch mit einer ScrollView gemacht, funktioniert top! (:

Ähnliche Beiträge

Mein Fenster geht in pygame nicht auf??

Das hier ist mein code aber irgendetwas ist falsch, dennn mein pygame fenster geht nicht auf kann mir jemand den ganzen neu schreiben und mir antworten?

import pygame



class Game:
    def __init__(self, width, height):
        pygame.init()
        self.width = width
        self.height = height
        self.screen = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_caption("Space invaders")
        self.running = True

        while self.running:
            self.clock.tick(60)
            self.screen.fill((0, 0, 255))

            import pygame

            class Game:
                def __init__(self, width, height):
                    pygame.init()
                    self.width = width
                    self.height = height
                    self.dysplay = pygame.display.set_mode((self.width, self.height))
                    pygame.display.set_cation("Space invaders")
                    self.running = True

                    while self.running:
                        for event in pygame.event.get():
                            if event.type == pygame.QUIT:
                                self.running = False

            if __name__ == "__main__":
                game = Game(800, 600)


                if event.type == pygame.QUIT:
                    self.running = False


if __name__ == " main ":
    game = Game(800, 600)

...zum Beitrag

PyQt button size?

Ich wollte die Größe bei einem Button ändern, allerdings sind sie genauso groß wie vorher:

from PyQt4.QtCore import *
from PyQt4.QtGui import *

app = QApplication([])
window = QWidget()
layout = QHBoxLayout()
bt = QPushButton('test')
bb = QPushButton('test2')
w = app.desktop().width() / 2
h = app.desktop().height()
layout.addWidget(bt)
layout.addWidget(bb)
bt.resize(w, h)
bb.resize(w, h)
window.setLayout(layout)
window.show()
app.exec()

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

Mein Fenster geht in Pycharm über pygame nicht auf?

Mein code ist so : aber mein fenster geht nicht auf

kann mir jemand helfen

import pygame



class Game:
    def __init__(self, width, height):
        pygame.init()
        self.width = width
        self.height = height
        self.dysplay = pygame.display.set_mode((self.width, self.height))
        pygame.display.set_cation("Space invaders")
        self.running = True

        while running:
            for event in pygame.event.get():
                if event.type == pygame.QUIT:
                    self.running = False


if __name__ == " main ":
    game = Game(800, 600)

...zum Beitrag

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zum Beitrag

HTML/CSS-Button(Bild ändern)?

Hallo, ich arbeite gerade an einen Button. Aber wie kann ich dieses Herz durch ein Bild ersetzten?

.icon{

background-color: white;

color: #00472d;

border: none;

font-size: 2rem;

padding: 0.5em;

line-height: 1;

width: 2em;

transition: border-radius 2s ease;

}

.icon:hover{

background-color:#00472d;

color: white;

border-radius: 50%;

...zum Beitrag

Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

...zum Beitrag

Farbe einer Rectangle ändern? (Tkinter)?

Hi!

Wie kann ich durch eine IF-Stellung die Farbe des Rechteckes ändern?

Mein Code:

from tkinter import *
import random
from tkinter import ttk

window = Tk()
window.title('Memory Game')

tabs = ttk.Notebook(window)
root = ttk.Frame(tabs)

w = Canvas(window, width=1920, height=1080)
window.geometry('1910x1080')
w.pack()

w.create_rectangle(0, 0, 150, 80, fill='red')                                                                       
w.create_text(75, 40, text="Frei", font=20)

w.create_rectangle(150, 0, 300, 80, fill="green")                                                     
textfeld1 = Text(master=w, width=10, height=1, wrap='word', font='arial')
textfeld1.place(x=180, y=30)

window.mainloop()

Wenn jetzt zum Beispiel Tom in das erste Textfeld geschrieben wird und durch einen Button in einer Variable geschpeichert wird, ich eine If-Stellung aufstellen kann, in der dann das Rechteck eine andere Farbe bekommt.

Danke im Vorraus!

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

Python: Wie kann ich feld1 bis feld7 so zusammenfassen, sodass ich das nicht alles einzeln eingeben muss?

Hey, ich möchte feld1 bis feld7 so zusammenfassen, sodass ich das nicht alles einzeln eingeben muss. Dazu finde ich nur leider nichts im Internet.

import tkinter as tk from tkinter import *

modul = tk.Tk()
modul.geometry("900x900")
modul.title("Bunt3x3")
modul.resizable(width=False, height=False)

r = "red"
y = "yellow"
g = "green"
b = "blue"

def change():
  if feld1["bg"] == r:
    feld1.config(bg=g)
    feld3.config(bg=g)
    feld5.config(bg=g)
    feld7.config(bg=g)
    feld2.config(bg=b)
    feld4.config(bg=b)
    feld6.config(bg=b)
    feld8.config(bg=b)

    feldlabel.config(text="Rot & gelb")

  elif feld1["bg"] == g:
    feld1.config(bg=r)
    feld3.config(bg=r)
    feld5.config(bg=r)
    feld7.config(bg=r)
    feld2.config(bg=y)
    feld4.config(bg=y)
    feld6.config(bg=y)
    feld8.config(bg=y)

    feldlabel.config(text="Gruen & blau")

feld1 = tk.Frame(bg=r, width=300, height=300)
feld1.grid(column=1, row=1)
feld3 = tk.Frame(bg=r, width=300, height=300)
feld3.grid(column=3, row=1)
feld5 = tk.Frame(bg=r, width=300, height=300)
feld5.grid(column=1, row=3)
feld7 = tk.Frame(bg=r, width=300, height=300)
feld7.grid(column=3, row=3)
feld2 = tk.Frame(bg=y, width=300, height=300)
feld2.grid(column=2, row=1)
feld4 = tk.Frame(bg=y, width=300, height=300)
feld4.grid(column=1, row=2)
feld6 = tk.Frame(bg=y, width=300, height=300)
feld6.grid(column=3, row=2)
feld8 = tk.Frame(bg=y, width=300, height=300)
feld8.grid(column=2, row=3)

feld = tk.Frame(bg="white", width=300, height=300).grid(column=2, row=2)
feldlabel = tk.Label(text="Gruen & blau", bg="white", fg="black", font=("Arial", 15, "bold"))
feldlabel.grid(column=2, row=2)
feldbutton = tk.Button(text="Farbe aendern!", font=("Arial", 15, "bold"), bg="white", fg="black", command=change).place(x=370, y=470)
modul.mainloop()

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zum Beitrag

Mit CSS zwei verschiedene Tabellen verschönern?

Habe in CSS grad ne Tabelle die ich mit:

table{

width:100%;

background-color: black;

border-style: none;

height: 70px;

color: white;

text-align: center;

font: 200% serif;

}

verschönert habe. Habe jetzt aber noch eine andere Tabelle die ich andere Eigenschaften geben möchte. Wie mache ich das jetzt?

...zum Beitrag

Wieso wird mein Column nach einer Row nicht in Flutter angezeigt?

Hallo, ich habe ein Programm das so aussehen soll:

Ich habe diesen Code:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),

              Column(
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
              Container(
                width: 100,
                color: Colors.yellowAccent,
                  ),
                ],
              ),
            ],
          )
          ),
        ),
      );
  }
}

Der letzte Container (yellowAccent) wird nicht angezeigt auf dem Emulator. Kann mir bitte jemand helfen?

Mfg Elias Brüggen

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen