Flutter – 横幅小工具

横幅小部件内置于flutter API 中。它有点类似于我们在调试模式下在flutter应用程序的右上角看到的调试横幅。它使我们能够在任何其他小部件的顶部显示消息或文本。下面我们将借助示例及其所有属性来了解其实现。

Banner 类的构造函数：

const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)

横幅小部件的属性：

child：此属性将一个小部件作为对象放置在横幅中。
color：此属性通过将Color类作为对象来为横幅分配背景颜色。
layoutDirection：此属性将TextDirection类中的对象作为确定子小部件将在Banner小部件中放置的方向的对象。
location：此属性通过将BannerLocation枚举作为对象来控制横幅的位置。
message：此属性接受一个字符串值作为对象来确定要在横幅中显示的文本。
textDirection：该属性再次将TextDirection作为对象来确定文本的方向，可以是rtl到ltr 。
textStyle：此属性负责Banner小部件中文本的样式。它接受TexStyle类作为对象。

例子：

Dart

import 'package:flutter/material.dart';
 
//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
            margin: const EdgeInsets.all(10.0),
            child: ClipRect(
              /** Banner Widget **/
              child: Banner(
                message: "20% off !!",
                location: BannerLocation.bottomStart,
                color: Colors.red,
                child: Container(
                  color: Colors.green[100],
                  height: 300,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                    child: Column(
                      children: [
                        Image.network(
                            'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190806131525/forkPython.jpg'), //Image.network
                        SizedBox(height: 10),
                        Text(
                          'GeeksforGeeks',
                          style: TextStyle(
                              color: Colors.green,
                              fontSize: 40,
                              fontWeight: FontWeight.bold), //TextStyle
                        ),
                        SizedBox(
                          height: 5,
                        ), //SizedBox
                        Text(
                          'Fork Python Course',
                          style: TextStyle(
                              color: Colors.green,
                              fontSize: 20,
                              fontWeight: FontWeight.bold), //TextStyle
                        ), //Text
                        SizedBox(height: 20),
                        RaisedButton(
                          child: Text('Register'),
                          color: Colors.greenAccent[400],
                          onPressed: () {},
                        ) //RaisedButton
                      ], //[]
                    ), //Column
                  ), //Padding
                ), //Container
              ), //Banner
            ), //ClipRect
          ), //container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

输出：

说明：在这个flutter应用程序中， Banner 小部件是ClipRect类的子类，它剪掉超出框的部分。横幅中的消息包含文本“ 20% off !!”，颜色为红色，位置设置为bottomStart 。其余部分由Banner小部件的child属性保存。从Banner小部件到Column的层次结构是Banner > Container > Padding > Column。在Colum小部件中，我们有一个小部件列表，作为children属性的对象。该列中的第一个元素是来自 Internet 的图像，然后我们有两个Text小部件和一个RaisedButton，它们都由SizedBox小部件分隔。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?