Multi-line labels on flex (FB 4.5) buttons?

问题

I'm trying to make a button in Flash Builder 4.5 that is multi-lined (specific line break, both are left justified), with the second line being italicized. I can do this by making a button, and throwing a label on top of it, but it wrecks the button functionality where that label sits.

Is there an easy functionality to do this, or is it starting to step into custom skins? (I've looked at it, but I'm pretty new to FB, and it looks like a steep learning curve)

回答1:

Yeah, you definitely want skinning. It's fairly easy since it generates all the code for you. You just need to find the label for the button and modify it to your will.

Sorry to say, but this is the only way to do it properly. If what you're trying to do is just hack it together, I don't think you should be touching code...

回答2:

Minor clarification/addition: While having multiple lines in the button label is as easy as setting the 'maxDisplayedLines' attribute of the 'labelDisplay' in the skin to anything larger than '1', s:Label does NOT support multiple styles; i.e. you can't have one line regular and the second line italic.

FTQuest

回答3:

To create a multi-lined Label of a Button:

Skin your Button (Simplest way: Create Skin from the Design view)
In the Skin, scroll to where you see the Label with the id="labelDisplay"
Set a Fixed Width to that Label in the Skin & you're Done!

Once you populate the label property of the Button, it'll auto multi-line for you

回答4:

There was nothing I've found to do what I wanted to do (I did find Flexlib and canvasButton, but it didn't seem to work for me)

What I ended up doing is making my own "simulated" buttons. A container with 2 lines of labels (one normal, one italic, like I wanted) with another container over it. mouseOver and mouseOut and click were all bound to the top container to make it seem like one large button. (I also used some alpha transparency to simulate highlighting.

For the curious (or other beginners with similar issue) -this is what I've done

    <s:BorderContainer id="bottomContainer" x="129" y="99" width="200" height="44" backgroundColor="#EEEEEE"
                   borderVisible="false" cornerRadius="6">
    <s:Label id="encLabel1" x="48" y="8" color="#000000" fontFamily="Arial"
             text="Create a new encounter"/>
    <s:Label id="encLabel2" x="48" y="24" color="#000000" fontStyle="italic"
             text="Single encounter"/>
    <s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>        
<s:BorderContainer id="coverContainer" x="129" y="99" width="200" height="44" backgroundColor="#000000"
                       borderVisible="false" cornerRadius="6" alpha=".1" mouseOver="alphaOver(event)" mouseOut="alphaOver(event)" click="trace('working')">
</s:BorderContainer>

来源：https://stackoverflow.com/questions/6077416/multi-line-labels-on-flex-fb-4-5-buttons

标签

apache-flex

flash-builder