基础 Widgets
Container
一个拥有绘制、定位、调整大小的widget
new Container(
constraints: BoxConstraints.expand(
height: Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
padding: const EdgeInsets.all(8.0),
color: Colors.blue[600],
alignment: Alignment.center,
child: Text('Hello World',
style:Theme.of(context).textTheme.display1.copyWith(color: Colors.white)),
transform: Matrix4.rotationZ(0.1),
),
Row
在水平方向上排列子Widget的列表
Expanded
Creates a widget that expands a child of a [Row], [Column], or [Flex] so that the child fills the available space along the flex widget's main axis.
new Row(
children: [
Expanded(
child: Text('Deliver features faster',textAlign:TextAlign.center),
),
Expanded(
child: Text('could you speak chinese',textAlign:TextAlign.center),
),
Expanded(
child: FittedBox(
fit: BoxFit.contain, // otherwise the logo will be tiny
child: const FlutterLogo(),
),
)
],
)
new Row(
children: [
const FlutterLogo(),
const Expanded(
child: Text('Flutter\'s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bug faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.'),
),
const Icon(Icons.sentiment_very_satisfied),
],
)
Column
在垂直方向上排列子widget的列表
new Column(
children: [
Text('Deliver feature faster'),
Text('Craft beautiful UIs'),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: const FlutterLogo(),
),
)
],
),
new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('We move under cover and we move as one'),
Text('Through the night, we have one shot to live another day'),
Text('We cannot let a stray gunshot give us away'),
Text('We will fight up close, seize the moment and stay in it'),
Text('It’s either that or meet the business end of a bayonet'),
Text('The code word is ‘Rochambeau,’ dig me?'),
],
),
Image
一个显示图片的widget
- new Image, for obtaining an image from an ImageProvider.
- new Image.asset, for obtaining an image from an AssetBundle using a key.
- new Image.network, for obtaining an image from a URL.
- new Image.file, for obtaining an image from a File.
- new Image.memory, for obtaining an image from a Uint8List.
The following image formats are supported: JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP
Text
单一格式的文本
new Text(
'hello,! How are you?',
textAlign:TextAlign.left,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
)
const Text.rich(TextSpan(text: 'Hello ', children: [
TextSpan(
text: 'beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(
text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
])),
Icon
A Material Design icon
各种各样的图标 √，+，等
new Icon(
Icons.add,
color:Colors.pink,
size: 30.0,
)
RaisedButton
Material Design中的button，一个凸起的材质矩形按钮
Column(
mainAxisSize: MainAxisSize.min,
children: [
const RaisedButton(
onPressed: null,
child: Text('Disabled Button', style: TextStyle(fontSize: 20)),
),
const SizedBox(
height: 30,
),
RaisedButton(
onPressed: () {},
child:
const Text('Enabled Button', style: TextStyle(fontSize: 20)),
),
const SizedBox(
height: 30,
),
RaisedButton(
onPressed: () {},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
])),
padding: const EdgeInsets.all(10.0),
child: const Text(
'Gradient Button',
style:TextStyle(fontSize:20)
),
),
)
],
)),
- FlatButton, a material design button without a shadow.
- DropdownButton, a button that shows options to select from.
- FloatingActionButton, the round button in material applications.
- IconButton, to create buttons that just contain icons.
- InkWell, which implements the ink splash part of a flat button.
- RawMaterialButton, the widget this widget is based on.
- material.io/design/components/buttons.html
Scaffold
Material Design 布局结构的基本实现。此类提供了用于显示 drawer、Snackbar和底部sheet的API。
class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
}
class _CounterState extends State {
int _count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button $_count times'),
),
bottomNavigationBar: BottomAppBar(
child: Container(height: 50.0,),
),
floatingActionButton: FloatingActionButton(
onPressed:() => setState(() {
_count++;
}),
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
AppBar 基础
一个典型的AppBar，带有标题、操作和溢出的下拉菜单。
class BasicAppBarSample extends StatefulWidget {
@override
_BasicAppBarSampleState createState() => _BasicAppBarSampleState();
}
class _BasicAppBarSampleState extends State {
Choice _selectedChoice = choices[0];
void _select(Choice choice) {
setState(() {
_selectedChoice = choice;
});
}
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Basic AppBar'),
actions: [
new IconButton(
icon: new Icon(choices[0].icon),
onPressed: (){ _select(choices[0]);},
),
new IconButton(
icon: new Icon(choices[1].icon),
onPressed: (){ _select(choices[1]); },
),
new PopupMenuButton(
onSelected: _select,
itemBuilder: (BuildContext context) {
return choices.skip(2).map((Choice choice){
return new PopupMenuItem(
value: choice,
child: new Text(choice.title),
);
}).toList();
},
)
],
),
body: new Padding(
padding: const EdgeInsets.all(16.0),
child: new ChoiceCard(choice: _selectedChoice,),
),
),
);
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List choices = const [
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
];
class ChoiceCard extends StatelessWidget {
const ChoiceCard ({Key key,this.choice}) :super(key:key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle =Theme.of(context).textTheme.display1;
return new Card(
color: Colors.white,
child: new Center(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Icon(choice.icon,size:128.0,color:textStyle.color),
new Text(choice.title,style:textStyle),
],
),
),
);
}
}
Scaffold Material Design 布局结构的基本实现。此类提供了用于显示 drawer、Snackbar和底部sheet的API。
选项卡式的AppBar
一个以TabBar作为底部widget的AppBar。
TabBar可用于在TabBarView中显示的页面之间导航。虽然TabBar是一个可以出现在任何地方的普通widget，但它通常包含在应用程序的AppBar中。
class TabbadAppBarSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home:new DefaultTabController(
length: choices.length,
child: new Scaffold(
appBar: new AppBar(
title: const Text('Tabbed AppBar'),
bottom: new TabBar(
isScrollable: true,
tabs:choices.map((Choice choice){
return new Tab(
text:choice.title,
icon:new Icon(choice.icon),
);
}).toList(),
),
),
body: new TabBarView(
children: choices.map((Choice choice) {
return new Padding(
padding: const EdgeInsets.all(16.0),
child: new ChoiceCard(choice: choice),
);
}).toList(),
),
),
),
);
}
}
选项卡式的AppBar