接着上一篇我们继续撸widget
const Text(this.data, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}) : assert(data != null),
textSpan = null,
super(key: key);
softWrap 自动换行
overflow 文本超出样式
/// How overflowing text should be handled.
enum TextOverflow {
/// Clip the overflowing text to fix its container.
clip,
/// Fade the overflowing text to transparent.
fade,
/// Use an ellipsis to indicate that the text has overflowed.
ellipsis,
}
Sample code
new Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontWeight: FontWeight.bold),
)
我们也可以用Text.rich来构造不同样式的TextSpan(跟UWP里面完全一样)
const Text.rich(this.textSpan, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}): assert(textSpan != null),
data = null,
super(key: key);
Sample code
const Text.rich(
const TextSpan(
text: 'Hello', // default text style
children: const <TextSpan>[
const TextSpan(text: ' beautiful ', style: const TextStyle(fontStyle: FontStyle.italic)),
const TextSpan(text: 'world', style: const TextStyle(fontWeight: FontWeight.bold)),
],
),
)
如果你想让某个Widget里面的Text都使用共同一个Style的话。我们可以使用DefaultTextStyle,Style的原则还是就近原则,从树的叶子开始到根,这点也是跟UWP一致,各种Style也是就近原则进行merge的。
return DefaultTextStyle(
style: TextStyle(color: Colors.red),
child: new Column(
children: <Widget>[
new Text(
'Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?Hello, How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontWeight: FontWeight.bold),
),
Text.rich(
const TextSpan(
text: 'Hello', // default text style
children: const <TextSpan>[
const TextSpan(
text: ' beautiful ',
style: const TextStyle(fontStyle: FontStyle.italic)),
const TextSpan(
text: 'world',
style: const TextStyle(fontWeight: FontWeight.bold)),
],
),
)
,
Text("hello flutter text",style: Theme.of(context).textTheme.title,),
],
),
)
Icon
Flutter 里面的Icon是字体Icon,它的Data是IconData
class Icons {
Icons._();
// Generated code: do not hand-edit.
// See https://github.com/flutter/flutter/wiki/Updating-Material-Design-Fonts
// BEGIN GENERATED
/// <i class="material-icons md-36">360</i> — material icon named "360".
static const IconData threesixty = IconData(0xe577, fontFamily: 'MaterialIcons');
如果系统没有你想要的。。你可以去更新它
这里是官方的一些自定义的Icon
搜搜看,很方便
下载好的字体文件夹为
image
将fonts文件夹里面的MyFlutterApp.ttf 放到项目的fonts文件夹下面
pubspec.yaml文件里面加入下面配置。。注意缩进。。
fonts:
- family: MyFlutterApp
fonts:
- asset: fonts/MyFlutterApp.ttf
import 'package:widgets_sample/Common/my_flutter_app_icons.dart';
new Column(
children: <Widget>[
Icon(Icons.add),
Icon(MyFlutterApp.spin3),
IconButton(icon: Icon(Icons.list), onPressed: () => {})
],
);
Flutter的世界里面任何东西都可以由更小的Widget组成
Button 最下一层实现是InkWell(提供交互响应),如果你只是想要tap等事件,不想要那种duangduangduang的水波纹效果,你可以使用GestureDetector。
/// * [GestureDetector], for listening for gestures without ink splashes.
/// * [RaisedButton] and [FlatButton], two kinds of buttons in material design.
/// * [InkResponse], a variant of [InkWell] that doesn't force a rectangular
/// shape on the ink reaction.
Button默认是有最小宽度88.0,高36.0,
你可以通过包一个ButtonTheme重写
child: ButtonTheme(
textTheme: ButtonTextTheme.normal,
minWidth: 88.0,
height: 36.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("RaisedButton"),
onPressed: () => {},
),
Button的Disable状态是由OnPressed事件是否为Null来判断的。
Flutter本身提供很多种Button。
OutlineButton
下面是一个自定义的圆角按钮
class ButtonWithRadius extends OutlineButton {
ButtonWithRadius(
{Key key,
@required onPressed,
Color color,
Color textColor,
Widget child,
double radius = 10.0})
: super(
key: key,
onPressed: onPressed,
child: child,
color: color,
textColor: textColor,
shape: new RoundedRectangleBorder(
side: BorderSide.none,
borderRadius: new BorderRadius.circular(radius)));
DropdownButton(
value: dropdownValue,
items: <String>['One', 'Two', 'Free', 'Four'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
),
IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
InkWell
A rectangular area of a Material that responds to touch.
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () {
// Perform some action
}),
PopupMenuButton(itemBuilder: (BuildContext context) {
return <String>['One', 'Two', 'Free', 'Four'].map((String item) {
return new PopupMenuItem<String>(
value: item,
child: new Text(item),
);
}).toList();
})
全部以上介绍的Widgets都在Sample Code。