您最多选择25个主题 主题必须以中文或者字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 
 
 

382 行
16 KiB

using System.Collections.Generic;
using System.Linq;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.rendering;
using Unity.UIWidgets.widgets;
namespace UIWidgetsGallery.gallery {
class ButtonsDemo : StatefulWidget {
public const string routeName = "/material/buttons";
public ButtonsDemo(Key key = null) : base(key: key) {
}
public override State createState() {
return new _ButtonsDemoState();
}
}
class _ButtonsDemoState : State<ButtonsDemo> {
const string _raisedText =
"Raised buttons add dimension to mostly flat layouts. They emphasize " +
"functions on busy or wide spaces.";
const string _raisedCode = "buttons_raised";
const string _flatText = "A flat button displays an ink splash on press " +
"but does not lift. Use flat buttons on toolbars, in dialogs and " +
"inline with padding";
const string _flatCode = "buttons_flat";
const string _outlineText =
"Outline buttons become opaque and elevate when pressed. They are often " +
"paired with raised buttons to indicate an alternative, secondary action.";
const string _outlineCode = "buttons_outline";
const string _dropdownText =
"A dropdown button displays a menu that's used to select a value from a " +
"small set of values. The button displays the current value and a down " +
"arrow.";
const string _dropdownCode = "buttons_dropdown";
const string _iconText =
"IconButtons are appropriate for toggle buttons that allow a single choice " +
"to be selected or deselected, such as adding or removing an item's star.";
const string _iconCode = "buttons_icon";
const string _actionText =
"Floating action buttons are used for a promoted action. They are " +
"distinguished by a circled icon floating above the UI and can have motion " +
"behaviors that include morphing, launching, and a transferring anchor " +
"point.";
const string _actionCode = "buttons_action";
ShapeBorder _buttonShape;
public _ButtonsDemoState() {
}
public override Widget build(BuildContext context) {
ButtonThemeData buttonTheme = ButtonTheme.of(context).copyWith(
shape: this._buttonShape
);
List<ComponentDemoTabData> demos = new List<ComponentDemoTabData> {
new ComponentDemoTabData(
tabName: "RAISED",
description: _raisedText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: this.buildRaisedButton()
),
exampleCodeTag: _raisedCode,
documentationUrl: "https://docs.flutter.io/flutter/material/RaisedButton-class.html"
),
new ComponentDemoTabData(
tabName: "FLAT",
description: _flatText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: this.buildFlatButton()
),
exampleCodeTag: _flatCode,
documentationUrl: "https://docs.flutter.io/flutter/material/FlatButton-class.html"
),
new ComponentDemoTabData(
tabName: "OUTLINE",
description: _outlineText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: this.buildOutlineButton()
),
exampleCodeTag: _outlineCode,
documentationUrl: "https://docs.flutter.io/flutter/material/OutlineButton-class.html"
),
new ComponentDemoTabData(
tabName: "DROPDOWN",
description: _dropdownText,
demoWidget: this.buildDropdownButton(),
exampleCodeTag: _dropdownCode,
documentationUrl: "https://docs.flutter.io/flutter/material/DropdownButton-class.html"
),
new ComponentDemoTabData(
tabName: "ICON",
description: _iconText,
demoWidget: this.buildIconButton(),
exampleCodeTag: _iconCode,
documentationUrl: "https://docs.flutter.io/flutter/material/IconButton-class.html"
),
new ComponentDemoTabData(
tabName: "ACTION",
description: _actionText,
demoWidget: this.buildActionButton(),
exampleCodeTag: _actionCode,
documentationUrl: "https://docs.flutter.io/flutter/material/FloatingActionButton-class.html"
)
};
return new TabbedComponentDemoScaffold(
title: "Buttons",
demos: demos,
actions: new List<Widget> {
new IconButton(
icon: new Icon(Icons.sentiment_very_satisfied),
onPressed: () => {
this.setState(() => {
this._buttonShape = this._buttonShape == null ? new StadiumBorder() : null;
});
}
)
}
);
}
public Widget buildRaisedButton() {
return new Align(
alignment: new Alignment(0.0f, -0.2f),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new RaisedButton(
child: new Text("RAISED BUTTON"),
onPressed: () => {
// Perform some action
}
),
new RaisedButton(
child: new Text("DISABLED"),
onPressed: null
)
}
),
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
RaisedButton.icon(
icon: new Icon(Icons.add, size: 18.0f),
label: new Text("RAISED BUTTON"),
onPressed: () => {
// Perform some action
}
),
RaisedButton.icon(
icon: new Icon(Icons.add, size: 18.0f),
label: new Text("DISABLED"),
onPressed: null
)
}
)
}
)
);
}
public Widget buildFlatButton() {
return new Align(
alignment: new Alignment(0.0f, -0.2f),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new FlatButton(
child: new Text("FLAT BUTTON"),
onPressed: () => {
// Perform some action
}
),
new FlatButton(
child: new Text("DISABLED"),
onPressed: null
)
}
),
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
FlatButton.icon(
icon: new Icon(Icons.add_circle_outline, size: 18.0f),
label: new Text("FLAT BUTTON"),
onPressed: () => {
// Perform some action
}
),
FlatButton.icon(
icon: new Icon(Icons.add_circle_outline, size: 18.0f),
label: new Text("DISABLED"),
onPressed: null
),
}
)
}
)
);
}
Widget buildOutlineButton() {
return new Align(
alignment: new Alignment(0.0f, -0.2f),
child: new Column(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new OutlineButton(
child: new Text("OUTLINE BUTTON"),
onPressed: () => {
// Perform some action
}
),
new OutlineButton(
child: new Text("DISABLED"),
onPressed: null
)
}
),
new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
OutlineButton.icon(
icon: new Icon(Icons.add, size: 18.0f),
label: new Text("OUTLINE BUTTON"),
onPressed: () => {
// Perform some action
}
),
OutlineButton.icon(
icon: new Icon(Icons.add, size: 18.0f),
label: new Text("DISABLED"),
onPressed: null
)
}
)
}
)
);
}
// https://en.wikipedia.org/wiki/Free_Four
string dropdown1Value = "Free";
string dropdown2Value;
string dropdown3Value = "Four";
public Widget buildDropdownButton() {
return new Padding(
padding: EdgeInsets.all(24.0f),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: new List<Widget> {
new ListTile(
title: new Text("Simple dropdown:"),
trailing: new DropdownButton<string>(
value: this.dropdown1Value,
onChanged: (string newValue) => {
this.setState(() => { this.dropdown1Value = newValue; });
},
items: new List<string> {"One", "Two", "Free", "Four"}.Select((string value) => {
return new DropdownMenuItem<string>(
value: value,
child: new Text(value)
);
}).ToList()
)
),
new SizedBox(
height: 24.0f
),
new ListTile(
title: new Text("Dropdown with a hint:"),
trailing: new DropdownButton<string>(
value: this.dropdown2Value,
hint: new Text("Choose"),
onChanged: (string newValue) => {
this.setState(() => { this.dropdown2Value = newValue; });
},
items: new List<string> {"One", "Two", "Free", "Four"}.Select((string value) => {
return new DropdownMenuItem<string>(
value: value,
child: new Text(value)
);
}).ToList()
)
),
new SizedBox(
height: 24.0f
),
new ListTile(
title: new Text("Scrollable dropdown:"),
trailing: new DropdownButton<string>(
value: this.dropdown3Value,
onChanged: (string newValue) => {
this.setState(() => { this.dropdown3Value = newValue; });
},
items: new List<string> {
"One", "Two", "Free", "Four", "Can", "I", "Have", "A", "Little",
"Bit", "More", "Five", "Six", "Seven", "Eight", "Nine", "Ten"
}.Select<string, DropdownMenuItem<string>>(value => {
return new DropdownMenuItem<string>(
value: value,
child: new Text(value)
);
}).ToList()
)
)
}
)
);
}
bool iconButtonToggle = false;
public Widget buildIconButton() {
return new Align(
alignment: new Alignment(0.0f, -0.2f),
child: new Row(
mainAxisSize: MainAxisSize.min,
children: new List<Widget> {
new IconButton(
icon: new Icon(
Icons.thumb_up
),
onPressed: () => { this.setState(() => this.iconButtonToggle = !this.iconButtonToggle); },
color: this.iconButtonToggle ? Theme.of(this.context).primaryColor : null
),
new IconButton(
icon: new Icon(
Icons.thumb_up
),
onPressed: null
)
}.Select<Widget, Widget>(
(Widget button) => new SizedBox(width: 64.0f, height: 64.0f, child: button)).ToList()
)
);
}
public Widget buildActionButton() {
return new Align(
alignment: new Alignment(0.0f, -0.2f),
child: new FloatingActionButton(
child: new Icon(Icons.add),
onPressed: () => {
// Perform some action
},
tooltip: "floating action button"
)
);
}
}
}