In less, I have two class:
.business-type, .examine-type {
height: 74px!important;
... // there are many other styles
}
I have a requirement, only the class is .examine-type, I want the height work, how to realize this ?
You can easy access it by doing this:
.examine-type {
height: 74px!important;
}
.business-type, .examine-type {
... // there are many other styles
}
You can separate out .examine-type class in different rule
.examine-type {
height: 74px!important;
}
and inherit this class in .business-type if required,
.business-type{
&:extend(.examine-type);
... // other styles
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
How can I create widget that contain all properties of a another widget.
e.g. in react-native I can create interface that extends ButtonProps;
Here I can pass all ButtonProps properties to my ButtonComponent.
interface ButtonComponentProps extends ButtonProps {
isError: boolean;
}
function ButtonComponent({isError, ...props}: ButtonComponentProps) {
return (
<Button color={isError ? 'red' : 'blue'} {...props} />
)
}
How can I do something like this in flutter?
e.g. I want to create screen_wrapper widget that contains all properties of scaffold class:
class ScreenContainer extends StatelessWidget {
final Widget child;
final Color statusbarcolor;
final Brightness statusBarIconBrightness;
final bool safeArea;
final Color bgColor;
final bool withScaffold;
final bool loading;
ScreenContainer({
#required this.child,
this.withScaffold = true,
this.statusbarcolor,
this.statusBarIconBrightness,
this.safeArea = true,
this.loading = false,
this.bgColor = Colors.white,
});
#override
Widget build(BuildContext context) {
final Widget widget = TabDetector(
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: safeArea ? MediaQuery.of(context).padding.top : 0),
child: child,
),
);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: statusbarcolor ?? Colors.white,
statusBarIconBrightness: statusBarIconBrightness ?? Brightness.light,
),
child: Scaffold(
backgroundColor: Colors.white,
body: widget,
// pass other scaffold properties here
),
);
}
}
and then use it:
ScreenContainer(
appbar: Appbar(),
child: Text('hello'),
);
If I understand your situation right, then what you can do is, make a StatlessWidget having all the properties, and then just accept the child to be passed
class YourClass extends StatelessWidget{
final Widget child;
YourClass({Key key, this.child}): super(key:key);
#override
Widget build(BuildContext context) {
return Scaffold(
// have all your properties and then the child
body: this.child
);
}
}
Use it like this
class AnotherClass extends StatelessWidget{
#override
Widget build(BuildContext context) {
// using your class
return YourClass(
child: your_widget
);
}
}
The above will have all the properties of the YourClass, then widget will be passed from AnotherClass. You can use YourClass anywhere, where you want the Scaffold properties like this only.
I have the following setup at the moment
.classA {
&.classB {
}
&.classC {
}
// some more
}
So every class is dependent on classA. Not requirements changed and I need to have classB,c ... working outside of classA.
However, it's important that it's still connected to classA via &.
I'm looking for something like
.classA, {
... // the comma should indicate classA or nothing
}
The clean way would be
.classB {
&, &.classA {
// style here
}
}
for every class
The main question is: is lparams simply gone from Anko, or am I doing something terribly wrong? The following snippet fails to compile:
verticalLayout {
}.lparams(width = matchParent, height = matchParent) {
topMargin = dip(10)
}
While this works without any problems:
verticalLayout {
layoutParams = LinearLayout.LayoutParams(matchParent, matchParent).apply {
topMargin = dip(10)
}
}
I wouldn't mind the second option too much, but you have to specify the layout type when generating the params, which can get a bit tiresome (and is also more brittle than the original solution).
I haven't found anything on the Anko GitHub page, the changelog, or by skimming recent commits. Here's the full UI class for reference:
class ReviewsFragmentUi(ctx: AnkoContext<ReviewsFragment>) : AnkoComponent<ReviewsFragment> {
override fun createView(ui: AnkoContext<ReviewsFragment>) = ui.apply {
verticalLayout {
layoutParams = LinearLayout.LayoutParams(matchParent, matchParent).apply {
topMargin = dip(10)
}
}
}.view
}
Relevant Gradle entries (I'm using Kotlin 1.0.0-beta-3595):
ext.versions = [
anko : '0.8.1',
]
compile "org.jetbrains.anko:anko-common:$versions.anko",
compile "org.jetbrains.anko:anko-sdk21:$versions.anko",
compile "org.jetbrains.anko:anko-support-v4:$versions.anko",
compile "org.jetbrains.anko:anko-design:$versions.anko",
compile "org.jetbrains.anko:anko-appcompat-v7:$versions.anko",
compile "org.jetbrains.anko:anko-cardview-v7:$versions.anko",
compile "org.jetbrains.anko:anko-recyclerview-v7:$versions.anko",
compile "org.jetbrains.anko:anko-gridlayout-v7:$versions.anko",
As a follow-up question: if lparams is indeed gone, then is there a more elegant replacement than what I'm already doing?
Apparently lparams is still there, but cannot be used as an extension function for the outermost layout:
So the following code fails:
override fun createView(ui: AnkoContext<ReviewsFragment>) = ui.apply {
verticalLayout {
// Layout elements here
}.lparams {
// Layout params here
}
}.view
But this compiles fine:
override fun createView(ui: AnkoContext<ReviewsFragment>) = ui.apply {
verticalLayout {
lparams {
// Layout params here
}
// Layout elements here
verticalLayout { }.lparams {
// lparams works fine if there is a parent layout
}
}
}.view
It's worth noting that using the non-tailing version of lparams is discouraged for inner layouts: it will create the wrong sublass of LayoutParams when the nested layouts are of different types. For a complete discussion, see this GitHub Issue.
Why don't you use the most recent way to write createView() method?
I think the following solves your problem:
override fun createView(ui: AnkoContext<ReviewsFragment>) : View = with(ui) {
return verticalLayout {
// Layout elements here
}.lparams {
// Layout params here
}
}
I've just started with QML game development using V-Play and coming from java, I stil have problems understanding some basics.
I know how I'd do it in Java, but don't know how it works in QML, so I'll explain it in Java terms:
I have a "base class" with some properties and methods. Then I have modules extending this base class with more specific features. (Like "class Module1 extends BaseModule")
Then I have an object ("ModuleContainer") that contains a Module, but I don't know which one - it's loaded dynamically at runtime. Thus, in Java i'd create a new object like "BaseModule someModule = new Module1()", and can later access it and also replace it (like "someModule = new Module2()").
How could I do that in QML?
I've tried properties, but I haven't found a way to create a new object and then use it. Dynamic creation of objects with an entityManager doesn't quit seem to work for this either.
I played around with components a bit and together with a Loader, it's pretty much exactly what I wanted.
Here's my code if anyone else needs something like this:
Basically, I create a baseclass (BaseModule), create two Modules that extend that class (java terms).
In a new class (ModuleSlot), I create two components containing a Module each, that can be dynamically loaded and replaced in the Main code.
Important parts
//define a component and make it accessible from the outside
property Component cmodule1: module1
Component {
id: module1
Module1 {
}
}
//define a component to hold the component to use (for easier changing)
property Component dynamicModule: dynamicModuleHolder.cmodule1
ModuleSlot {
id:dynamicModuleHolder
}
//the magic happens here: the defined component is loaded dynamically on runtime,
when changed, the old one is removed and the new one loaded
Loader {
sourceComponent:dynamicModule
}
Full Code
Main.qml:
GameWindow {
id: gameWindow
//licenseKey: "<generate one from http://v-play.net/licenseKey>"
activeScene: scene
width: 640
height: 960
property Component dynamicModule: dynamicModuleHolder.cmodule1
property int activeElement: 1
Scene {
id: scene
width: 640
height: 960
Loader{
sourceComponent:dynamicModule
}
ModuleSlot {
id:dynamicModuleHolder
}
MouseArea {
anchors.fill: parent
onClicked: {
if(activeElement == 1) {
dynamicModule = dynamicModuleHolder.cmodule2
activeElement = 2
} else {
dynamicModule = dynamicModuleHolder.cmodule1
activeElement = 1
}
}
}
}
}
BaseModule.qml:
Item {
property int someAttribute: 0
}
Module1.qml/Module2.qml (Module2 only has a different Rectangle)
BaseModule {
someAttribute: 5 // just to show that Module1 inherits from BaseModule
Rectangle {
color: "red"
width: 50
height: 50
x: 200
y: 200
}
}
ModuleSlot
Item {
property Component cmodule1: module1
property Component cmodule2: module2
QtObject {
id: internalSettings
property color color: "green"
}
Component {
id: module1
Module1 {
}
}
Component {
id: module2
Module2 {
}
}
}
I am using #content within mixins to simplify Media Queries. If I use the first mixin within nested classes the output bubbles up and nests the classes. The second example doesn't work at all (no errors), the nesting doesn't seem to work properly.
This works fine
// Everything larger than a landscape tablet but less than or equal to the desktop
#mixin desktop-only {
#media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
#content;
}
.lt-ie9
{
#content;
}
}
This does not work
#mixin ie8 {
.lt-ie9
{
#content;
}
}
Your mixin looks like it works to me:
.foo {
#include ie8 {
color: red;
}
}
The output is exactly as I would expect it to be:
.foo .lt-ie9 {
color: red;
}
Since your question doesn't give any useful information as to why the mixin is wrong, I'm going to assume that what you want is to have the classes in the reverse order. In which case, your mixin needs to be written like so:
#mixin ie8 {
.lt-ie9 & {
#content;
}
}
Output:
.lt-ie9 .foo {
color: red;
}