Руководство Flutter Banner
View more Tutorials:
Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.
Facebook
В Flutter, Banner - это диагональное сообщение (diagonal message), отображаемое на поверхности и в углу другого Widget. Banner часто используется для украшения и выделения сообщения, касающегося этого Widget.
Banner Constructor:
Banner Constructor
const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)
main.dart (ex1)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'o7planning',
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/o7planning/rs/master/flutter/fast_food.png',
fit: BoxFit.cover,
),
),
),
),
)
);
}
}
Свойство child используется для определения содержимого, находящегося под "banner". В большинстве случаев это свойство используется в качестве Widget, содержащего изображение.
Widget child
child также может быть смешанным контентом, включающим текст и изображения:
main.dart (child ex2)
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'o7planning',
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/o7planning/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))
],
)
],
),
),
),
)
);
}
}
Свойство message определяет сообщение, отображаемое на "banner".
@required String message
Свойство layoutDirection используется для указания направления компоновки. Его значение по умолчанию - TextDirection.ltr (Left to Right).
TextDirection layoutDirection
// Enum values:
TextDirection.ltr // Left to Right (Default)
TextDirection.rtl // Right to Left
Концепция Layout Direction (направление компоновки) помогает создавать приложения, подходящие для разных языков и культур. В частности, английский язык пишется слева направо, а арабский - справа налево.
Свойство location используется для указания позиции отображения "banner". Оно может принимать одно из четырех следующих значений:
- BannerLocation.topStart
- BannerLocation.topEnd
- BannerLocation.bottomStart
- BannerLocation.bottomEnd
@required BannerLocation location
Если направление компоновки (Layout Direction): слева направо:
- layoutDirection: TextDirection.ltr (Default)
Если направление компоновки (Layout Direction) - справа налево::
- layoutDirection: TextDirection.rtl
Свойство color используется для указания цвета "banner".
Color color: _kColor
Свойство textStyle используется для указания стиля текста, отображаемого на "banner".
TextStyle textStyle: _kTextStyle
Например:
textStyle: TextStyle(fontSize: 20)
textStyle: TextStyle(
fontSize: 14,
fontStyle: FontStyle.italic,
color: Colors.yellow
)
- TODO Link?
TextDirection textDirection
// Enum Values:
TextDirection.ltr // Left to Right
TextDirection.rtl // Right to Left
