在Flutter中,横幅(Banner)是在另一个Widget的表面和角落显示的对角消息。标语通常用于装饰和突出显示有关小部件的消息。
Banner构造器:
const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)
1. Banner示例
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Banner Example"),
),
body: Container(
padding: EdgeInsets.all(16),
child: Align(
alignment: Alignment.topCenter,
child: Banner (
message: 'Offer 20% off',
location: BannerLocation.topEnd,
color: Colors.red,
child: Container(
height: 186,
width: 280,
child: Image.network(
'https://raw.githubusercontent.com/yiibai/rs/master/flutter/fast_food.png',
fit: BoxFit.cover,
),
),
),
),
)
);
}
}
运行结果如下:
2. child属性
child
属性用于定义“横幅”下的内容。在大多数情况下,它是一个包含图像的窗口小部件。
Widget child
child
属性也可以是文字和图片的混合体:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'yiibai',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold (
appBar: AppBar(
title: Text("Banner Example"),
),
body: Banner (
message: 'Offer 20% off',
location: BannerLocation.topStart,
color: Colors.red,
child: Container(
height: 150,
width: double.infinity,
color: Colors.lightGreen,
child: Padding (
padding: EdgeInsets.all(16),
child: Row (
children: [
Image.network (
"https://raw.githubusercontent.com/yiibai/rs/master/flutter/fast_food.png"
),
SizedBox(width: 10),
Column (
children: [
Text("Fast Food",style: TextStyle(fontSize: 30, color: Colors.blue)),
SizedBox(height: 10),
Text("Description ....", style: TextStyle(fontStyle: FontStyle.italic))
],
)
],
),
),
),
)
);
}
}
3. message属性
message
属性定义在“横幅”上显示的消息。
@required String message
4. layoutDirection属性
layoutDirection
属性用于指定布局的方向。其默认值为TextDirection.ltr
(从左到右)。
TextDirection layoutDirection
// Enum values:
TextDirection.ltr // Left to Right (Default)
TextDirection.rtl // Right to Left
布局方向概念有助于创建适用于不同语言和文化的应用程序。具体来说,英语是从左到右书写的,而阿拉伯语是从右到左书写的。
5. location属性
location
属性用于指定显示“横幅”的位置。它可以接收以下四个值之一:
BannerLocation.topStart
BannerLocation.topEnd
BannerLocation.bottomStart
BannerLocation.bottomEnd
@required BannerLocation location
如果布局方向是从左到右:
- layoutDirection: TextDirection.ltr (默认方式)
如果布局方向是从右到左:
- layoutDirection: TextDirection.rtl
6. color属性
color
属性用于指定“横幅”的颜色。
Color color: _kColor
7. textStyle属性
textStyle
属性用于指定“横幅”上显示的文本样式。
TextStyle textStyle: _kTextStyle
例如:
textStyle: TextStyle(fontSize: 20)
字体大小为:20 ,显示效果如下:
textStyle: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
color: Colors.yellow
)