How can i change foreground color in new DatePicker for iOS 14?
VStack (alignment: .center, spacing: 0)
{
DatePicker(selection: self.$enddate, in: self.endMinDate()...self.endMaxDate()) {
Text("Start")
}.labelsHidden().colorMultiply(MyColor.bluecolor)
}.foregroundColor(MyColor.bluecolor)
Old DatePicker in iOS 13 without problem:
I don't have your colors but the following should work.
Tested with Xcode 12.1 / iOS 14.1
VStack (alignment: .center, spacing: 0)
{
DatePicker(selection: self.$enddate, in: self.endMinDate()...self.endMaxDate()) {
Text("Start")
}.labelsHidden()
}
.accentColor(MyColor.bluecolor) // << this one !!
//.accentColor(.red) // << used for demo
Related
I have a Text and Picker in HStack separated by Spacer. What I want is that the Spacer should should occupy maximum space between picker and text so that the Text and Picker are not the extreme ends of the HStack but, the picker expands to occupy maximum space. Any clue as to how can this can achieved and that the size of Picker is equivalent to its content?
HStack() {
Text(template.name)
.multilineTextAlignment(.leading)
Spacer()
if template.oneItemOnly == "1" {
if let items = template.items {
Picker(selection: $selectedSegment, label:Text("")){
ForEach( 0..<items.count) { index in
Text(items[index].name)
.tag(index)
}
}
.pickerStyle(SegmentedPickerStyle())
}
}
}
You can set max width of Spacer by adding a .frame modifier:
Spacer().frame(maxWidth: .infinity)
Alternatively you can try using GeometryReader to set the width of the Picker relative to the screen width:
GeometryReader { proxy in
...
Picker(selection: $selectedSegment, label: EmptyView()) {
...
}
.frame(width: proxy.size.width / 3)
}
You may also try to implement your own Picker like presented here: Custom Segmented Picker
I have a Text that I want to modify with a .minimumScaleFactor(0.1) when the length of its string extends outside the view. However, the scaling applies every time, even when the original font size would be perfectly fine.
My view is structured thusly:
VStack(alignment: .center, spacing: 0) {
HStack {
Image("medal \(place)").resizable()
.foregroundColor(color)
.frame(width: 40, height: 40)
Spacer()
Text(username)
.font(.bold(16))
.lineLimit(1)
.minimumScaleFactor(0.1)
.frame(alignment: .trailing)
.foregroundColor(Color("mediumTextColor"))
}
Spacer()
Text(score)
.font(.extraBold(60))
.foregroundColor(color)
.lineLimit(1)
.minimumScaleFactor(0.7)
Spacer()
}
.frame(height: 96)
.padding(10)
.cornerRadius(16)
.overlay(RoundedRectangle(cornerRadius: 16)
.stroke(color, lineWidth: 2))
A continuation of answer above.
What is important is the order in which the modifiers are applied:
Text("This is a really long sentence.")
.minimumScaleFactor(0.5)
.font(.custom("OpenSans", size: 15))
.lineLimit(1)
.layoutPriority(1)
There isn't a need for the GeometryReader unless you need it for something else
Adding .lineLimit(1) to the Text will work well.
Xcode: 11.3.1
Important for that minimumScaleFactor() only does its job when it is needed, is the combination of .minimumScaleFactor AND .lineLimit(1); otherwise it will not work. layoutPriority(1) is not the key here.
Example - this works; Scale is only applied when needed:
Text("Something").minimumScaleFactor(0.5).lineLimit(1)
Adding a GeometryReader around the VStack that my two Text views were in solved this. As requested by #gohnjanotis:
GeometryReader { proxy in
VStack(alignment: .center, spacing: 0) {
HStack {
Image("medal \(self.place)").resizable()
.foregroundColor(self.color)
.frame(width: 40, height: 40)
Spacer()
Text(self.username)
.minimumScaleFactor(0.1)
.font(.bold(16))
.lineLimit(1)
.frame(alignment: .trailing)
.foregroundColor(Color("mediumTextColor"))
.layoutPriority(1)
}
.padding(.top, 10)
.padding(.horizontal, 10)
Spacer()
Text(self.score)
.font(.extraBold(60))
.foregroundColor(self.color)
.lineLimit(1)
.minimumScaleFactor(0.1)
.layoutPriority(1)
.padding(.horizontal, 10)
.padding(.bottom, 10)
.offset(y: -10)
}
.frame(width: proxy.size.width, height: proxy.size.height, alignment: .top)
}
.frame(maxHeight: 130)
Add .layoutPriority(1) modifier to your Text to make sure it takes the space if there is any.
After trying to figuring this out for a long while... playing with minimumScaleFactor, LineLimit, layoutPriority... I found out that using .frame() helps solve my problem.
My problem is that minimumScaleFactor applies to Text even if it is not needed.
Applying .frame() ad the last line solve my problem.
Something like this...
GeometryReader { geometry in
VStack{
Text("Hello")
.foregroundColor(Color.Black)
.font(.system(size: 50))
.minimumScaleFactor(0.1)
.lineLimit(1)
.frame(height: geometry.size.height)
}
}
I created a UIHostingController to put a SwiftUI view in my app. The root view contains a VStack, and inside that some HStacks and Pickers. The picker pushes the view wider than the screen by 8 points. It looks bad - text is slightly off screen. Usually I would fix this with auto layout constraints that pin the left and right edges of the view to the superview, with priority 1000 (required). What is the equivalent in SwiftUI?
Some boiled down code that triggers the problem
struct EditSegmentView: View {
#State var seconds: Int = 10
var body: some View {
VStack {
HStack {
Text("Pause after intro")
Spacer()
Text("10 seconds")
}
Picker(selection: $seconds, label: Text("Seconds")) {
ForEach(0..<60) { n in
Text("\(n) sec").tag(n)
}
}
}
}
}
That is displayed from a UIViewController, like this:
let editView = EditSegmentView()
let vc = UIHostingController(rootView: editView)
vc.modalPresentationStyle = .fullScreen
present(vc, animated: true)
I can't see anything obviously wrong with the code provided. You could try using a GeometryReader to force the VStack to be the width of the available space. Also add some padding(), because otherwise your Text will start right at the edge
var body: some View {
GeometryReader { proxy in
VStack {
//...
} .padding()
.frame(width: proxy.size.width)
}
}
Are there any clues as to why the view is expanding beyond the edges when you debug its view hierarchy?
This is a little late, but I had the same issue and fixed by making sure the outer VStack had it's alignment set to .leading. The inner Vstack also has alignment: leading and then added a .padding() to the inner VStack
I'm having trouble drawing polylines, and I think I've deduced it to being an issue with iOS 11 beta 4. It was working yesterday with the same code, and now I've updated to beta 4 and it doesn't draw polylines.
Just confirmed this by trying it in Xcode 8 on iOS 10.3 simulator, and in Xcode 9b4 on the iOS 11b4 simulator.
Code:
import MapKit
class ViewController: UIViewController, MKMapViewDelegate {
let mapView = MKMapView()
override func viewDidLoad() {
super.viewDidLoad()
mapView.frame = CGRect(x: 10, y: 10, width: 300, height: 300)
mapView.delegate = self
mapView.region = MKCoordinateRegionMake(CLLocationCoordinate2D(latitude: 51.482736, longitude: -0.015253), MKCoordinateSpanMake(0.005, 0.005))
mapView.delegate = self
let coordinate1 = CLLocationCoordinate2D(latitude: 51.482736, longitude: -0.015253)
let coordinate2 = CLLocationCoordinate2D(latitude: 51.482736, longitude: -0.016253)
let polyline = MKPolyline(coordinates: [coordinate1, coordinate2], count: 2)
mapView.add(polyline, level: .aboveLabels)
view.addSubview(mapView)
}
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
let renderer = MKPolylineRenderer(overlay: overlay)
renderer.strokeColor = UIColor.red
renderer.lineWidth = 4.0
return renderer
}
}
iOS 10:
iOS 11:
Annotations are added to the map without issue.
Fixed in beta 5. We just had to wait.
I trying to make custom button and few other elements styled as KDE 5 'Breeze' theme. I considered to make separated palette object (called BreezePalette.qml that contains a lot of readonly color properties) for all of this widgets (because I do not want them to be styled in any other way, that's thy they called Breeze). The main concept is to make palette as property of widgets and create one palette in main.qml where I can change property theme to light or dark. It looks to me rational, because I planning only include all subset of .qml files into project, without any other additional files to Qt itself (that making it portable and easy to deploy). Here is that I have, can someone let me know how can I forward palete as a property?
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.1
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
menuBar: MenuBar{
Menu{
title: "File"
MenuItem{
text: "Exit"
onTriggered: Qt.quit()
}
}
}
BreezeButton{
x: 106
y: 82
palette: brPalette
onClicked: {
Qt.quit()
}
caption: "Button"
}
BreezePalette{
id: brPalette
theme: "light"
}
}
BreezePalette.qml
import QtQuick 2.2
QtObject {
id: palette
property string theme: "light"
readonly property color base: if (theme == "light"){
"#eff0f1"
} else if (theme == "dark"){
"#31363b"
}
readonly property color focus: "#3daee9"
readonly property color buttonText: if (theme == "light"){
"#31363b"
} else if (theme == "dark"){
"#eff0f1"
}
}
BreezeButton.qml
import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
Item {
id: root
implicitHeight: bodyText.font.pixelSize + 32
implicitWidth: bodyText.width + 32
property string caption: "Button"
property string iconSource
property int fontSize: 18
//I've tried to throw BreezePalette as a property to BreezeButton, but looks like my skills ended there (I have no any experience with js or qml before. I started learn it only few weeks)
property BreezePalette palette
signal clicked
Rectangle {
id: body
border {
width: 1
color: "#808e8e"
}
anchors{
fill: parent
}
gradient: Gradient {
id: bodyGradient
GradientStop { position: 0.4; color: "#4c4c4c" }
GradientStop { position: 0.9; color: "#31363b" }
}
MouseArea{
id: bodyMouseArea
z: bodyText.z + 1
anchors {
fill: parent
}
hoverEnabled: true
onEntered: {
body.border.color = "#3daee9"
}
onExited: {
body.border.color = "#7f8c8d"
}
onPressed: {
body.color = "#3daee9" // this one works, but I need to switching theme as you can see n `BreezePalette.qml`
//This one not working as expected, but seeing my properties as I need
//body.color = palette.focus
body.gradient = null
}
onReleased: {
body.color = "#4d4d4d"
body.gradient = bodyGradient
}
onClicked: {
root.clicked()
}
}
Text {
id: bodyText
anchors {
verticalCenter: body.verticalCenter
horizontalCenter: body.horizontalCenter
}
font.pointSize: fontSize
color: "#fcfcfc"
text: caption
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
Since stackexchange designed for sharing knowledge (or maybe even for ask for something you don't know well) I see it's rational to post it there because I need knowledge of experts. If you have any other point of view regarding this question I'll be glad to hear that. Appreciated any help.
Thanks
Svyatoslav
UPDATE:
Just found an answer, this code snippet working as well
property BreezePalette palette: BreezePalette
So, my second answer is - is that good to user this method? It's provide me thing I need, exactly as was expected.
Quite a late answer, but there is a module to have breeze theme.
qml-module-qtquick-controls-styles-breeze