Flutter_基础控件及属性

Flutter基础控件及属性

Container

    一个拥有绘制、定位、调整大小的 widget。

属性

    alignment → AlignmentGeometry
    将孩子与容器内的对齐。
    
    child → Widget
    容器所包含 的孩子。
    
    constraints → BoxConstraints
    适用于儿童的其他限制。
    
    decoration → Decoration
    孩子 背后的装饰。
    
    foregroundDecoration → Decoration
    在孩子面前涂漆的装饰。
    
    margin → EdgeInsetsGeometry
    空的空间环绕装饰和孩子。
    
    padding → EdgeInsetsGeometry
    在装饰里面刻的空的空间。如果有的话，将孩子放在这个衬垫内。
    
    transform → Matrix4
    在绘制容器之前应用的转换矩阵。

代码

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            margin: const EdgeInsets.all(10.0),
            padding: const EdgeInsets.all(20),
            color: const Color(0xFF00FF00),
            width: 200.0,
            height: 200.0,
            child: Text(
              "123124",
              style: TextStyle(color: Color(0xFFffFFff)),
              textDirection: TextDirection.ltr,
            ),
          ),
        );
      }
    }       

Row

在水平方向上排列子widget的列表。

属性

    children → List<Widget>
    树中此小部件下方的小部件。
    
    crossAxisAlignment → CrossAxisAlignment
    如何将孩子放在十字轴上。
    
    direction → Axis
    用作主轴的方向。
    
    mainAxisAlignment → MainAxisAlignment
    如何将孩子放在主轴上
    
    mainAxisSize → MainAxisSize
    主轴应占用多少空间。
    
    textBaseline → TextBaseline
    如果根据基线对齐项目，则使用哪个基线。
    
    textDirection → TextDirection
    确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
    
    verticalDirection → VerticalDirection
    确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。    

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return Row(
          textDirection: TextDirection.ltr,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Expanded(
              child: Container(
                color: Colors.red,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 1,
            ),
            Expanded(
              child: Container(
                color: Colors.yellow,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 2,
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
                padding: EdgeInsets.all(5.0),
              ),
              flex: 1,
            ),
          ],
        );
      }
    }

Column

在垂直方向上排列子widget的列表。

属性

    children → List<Widget>
    树中此小部件下方的小部件。
    
    crossAxisAlignment → CrossAxisAlignment
    如何将孩子放在十字轴上。
    
    direction → Axis
    用作主轴的方向。
    
    mainAxisAlignment → MainAxisAlignment
    如何将孩子放在主轴上。
    
    mainAxisSize → MainAxisSize
    主轴应占用多少空间。
    
    textBaseline → TextBaseline
    如果根据基线对齐项目，则使用哪个基线。
    
    textDirection → TextDirection
    确定为水平，以及如何解释奠定孩子出去 start，并end在水平方向上。
    
    verticalDirection → VerticalDirection
    确定垂直放置孩子以及如何解释start和end垂直方向的顺序 。

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return Column(
          textDirection: TextDirection.ltr,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text('We move under cover and we move as one',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('Through the night, we have one shot to live another day',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('We cannot let a stray gunshot give us away',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('We will fight up close, seize the moment and stay in it',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('It’s either that or meet the business end of a bayonet',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('The code word is ‘Rochambeau,’ dig me?',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
            Text('Rochambeau!',
                style: TextStyle(height: 5), textDirection: TextDirection.ltr),
          ],
        );
      }
    }

Image

一个显示图片的widget

- new Image, 用于从ImageProvider获取图像。
- new Image.asset,用于从AssetBundle获取图像。
        
        1.在project下创建文件夹
        2.把要使用的文件放到新创建的文件夹中
        3.编辑pubspec.yaml文件
        4.去掉 assets:前的注释
        5.在asset:下一行注册图片资源
        6. Image.asset('注册的文件名')


- new Image.network,用于从URL获取图像。

         Image.network('https://flutter.io/images/homepage/header-illustration.png')
- new Image.file, 用于从文件中获取图像。

         Image.file(File("/Users/gs/Downloads/1.jpeg")),
- new Image.memory, 用于从Uint8List获取图像
        
        Image.memory(bytes)

属性

    alignment → AlignmentGeometry
    How to align the image within its bounds. [...]
    final
    centerSlice → Rect
    九个补丁图像的中心切片。
    
    color → Color
    如果为非null，则使用colorBlendMode将此颜色与每个图像像素混合。
    
    colorBlendMode → BlendMode
    用于将颜色与此图像组合。
    
    excludeFromSemantics → bool
    是否从语义中排除此图像。
    
    filterQuality → FilterQuality
    用于设置图像的FilterQuality。
    
    fit → BoxFit
    如何将图像刻录到布局期间分配的空间中。
    
    gaplessPlayback → bool
    当图像提供者更改时，是继续显示旧图像（true）还是简单地显示任何内容（false）。

    height → double
    如果为非null，则要求图像具有此高度。
    
    image → ImageProvider
    要显示的图像。
    
    matchTextDirection → bool
    是否在TextDirection的方向上绘制图像。

    repeat → ImageRepeat
    如何绘制图像未覆盖的布局边界的任何部分。
    
    semanticLabel → String
    图像的语义描述。
    
    width → double
    如果为非null，则要求图像具有此宽度。

Text：

该 widget 可让创建一个带格式的文本。

属性

    data → String
    要显示的文字。
    
    locale → 区域设置
    用于在可以以不同方式呈现相同Unicode字符时选择字体，具体取决于区域设置。
    
    maxLines → int
    文本要跨越的可选最大行数，必要时包装。如果文本超过给定的行数，则会根据溢出将其截断。
    
    overflow → TextOverflow
    如何处理视觉溢出。
    
    semanticsLabel → String
    此文本的替代语义标签。
    
    softWrap → 布尔
    文本是否应该在软换行符处中断。
    
    strutStyle → StrutStyle
    要使用的支柱风格。Strut样式定义了strut，它设置了最小垂直布局度量。
    
    style → TextStyle
    如果为非null，则为此文本使用的样式。
    
    textAlign → TextAlign
    文本应如何水平对齐。
    
    textDirection → TextDirection
    文本的方向性。
    
    textScaleFactor → double
    每个逻辑像素的字体像素数。
    
    textSpan → TextSpan
    要显示为TextSpan的文本。
    
    
    hashCode → int
    此对象的哈希码。
    只读，继承
    键 → 键
    控制一个小部件如何替换树中的另一个小部件。
    
    runtimeType → 类型
    表示对象的运行时类型。
    只读，继承

代码

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Text('Hello,! How are you?',
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontWeight: FontWeight.bold),
              //下面这行必须要有,否则会报报
              textDirection: TextDirection.ltr),
        );
      }
    }

Icon

A Material Design icon.

图标代码查询

属性

    color → Color
    绘制图标时使用的颜色。
    
    icon → IconData
    要显示的图标。可用图标中描述的图标。
    
    semanticLabel → String
    图标的语义标签。
    
    size → double
    逻辑像素中图标的大小。
    
    textDirection → TextDirection
    用于渲染图标的文本方向。

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return Icon(
          IconData(60219, fontFamily: 'MaterialIcons'),
          color: Color(0xFF00FF00),
          textDirection: TextDirection.ltr,
        );
      }
    }

RaisedButton

Material Design中的button， 一个凸起的材质矩形按钮

属性

    animationDuration → Duration
    定义形状和高程的动画更改的持续时间。
    
    child → Widget
    按钮的标签。
    
    clipBehavior → Clip
    根据此选项，内容将被剪裁（或不剪辑）。
    
    color → Color
    按钮的填充颜色，由其材料显示，同时处于默认（未按下，已启用）状态
    
    colorBrightness → Brightness
    用于此按钮的主题亮度。
    
    disabledColor → Color
    未启用按钮时 按钮的材质相对于其父级的高程。
    
    disabledElevation → double
    禁用按钮时用于此按钮文本的颜色。
    
    disabledTextColor → Color
    禁用按钮时用于此按钮文本的颜色。
    
    elevation → double
    将此按钮相对于其父级放置的z坐标。
    
    enabled → bool
    是启用还是禁用按钮。
    
    height → double
    按钮的垂直范围。
    
    highlightColor → Color
    按钮的InkWell的高亮颜色。
    
    highlightElevation → double
    启用并按下按钮时 按钮的材质相对于其父级的高程。
    
    materialTapTargetSize → MaterialTapTargetSize
    配置点击目标的最小尺寸。
    
    minWidth → double
    按钮占据的最小水平范围。
    
    onHighlightChanged → ValueChanged<bool>
    由底层InkWell小部件的InkWell.onHighlightChanged 回调调用。
    
    onPressed → VoidCallback
    点击或以其他方式激活按钮时调用的回调。
    
    padding → EdgeInsetsGeometry
    按钮的孩子的内部填充。

    shape → ShapeBorder
    按钮材质的形状。
    
    splashColor → Color
    按钮InkWell的闪烁颜色。
    
    textColor → Color
    用于此按钮文本的颜色。
    
    textTheme → ButtonTextTheme
    定义按钮的基色，以及按钮的最小尺寸，内部填充和形状的默认值。  

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Code Sample for material.Scaffold',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: RaisedButton(
            onPressed: () {},
            textColor: Colors.white,
            padding: const EdgeInsets.all(0.0),
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[Colors.red, Colors.green, Colors.blue],
                ),
              ),
              padding: const EdgeInsets.all(10.0),
              child: Text('Gradient Button'),
            ),
          ),
        );
      }
    }

Scaffold

Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

属性

    appBar → PreferredSizeWidget
    一个应用栏，显示在脚手架的顶部。
    
    backgroundColor → Color
    作为整个脚手架基础的材质小部件的颜色。
    
    body → Widget
    支架的主要内容。
    
    bottomNavigationBar → Widget
    底部导航栏显示在脚手架的底部。
    
    bottomSheet → Widget
    要显示的持久性底部工作表。
    
    drawer → Widget
    显示在身体侧面的面板，通常隐藏在移动设备上。从左到右（TextDirection.ltr）或从右到左（TextDirection.rtl）。
    
    drawerDragStartBehavior → DragStartBehavior
    确定处理拖动开始行为的方式。
    
    endDrawer → Widget
    显示在身体侧面的面板，通常隐藏在移动设备上。从右到左（TextDirection.ltr）或从左到右（TextDirection.rtl）。
    
    floatingActionButton → Widget
    显示在身体上方的按钮，位于右下角。
    
    floatingActionButtonAnimator → FloatingActionButtonAnimator
    Animator将floatingActionButton移动到新的floatingActionButtonLocation。
    
    floatingActionButtonLocation → FloatingActionButtonLocation
    负责确定floatingActionButton的去向。
    
    persistentFooterButtons → List<Widget>
    一组显示在脚手架底部的按钮。
    
    primary → bool
    此脚手架是否显示在屏幕顶部。
    
    resizeToAvoidBottomInset → bool
    如果为true，则body和scaffold的浮动窗口小部件应自行调整大小，以避免屏幕键盘的高度由环境MediaQuery的MediaQueryData.viewInsets bottom属性定义。
    
    resizeToAvoidBottomPadding → bool
    不推荐使用此标志，请改用resizeToAvoidBottomInset 。
    @ Deprecated（'使用resizeToAvoidBottomInset指定在键盘出现时是否应调整主体的大小'）

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Code Sample for material.Scaffold',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: Scaffold(
                appBar: AppBar(
                  title: Text('Sample Code'),
                ),
                body: Center(
                  child: Text('You have pressed the button'),
                ),
                bottomNavigationBar: BottomAppBar(
                  child: Container(
                    height: 50.0,
                  ),
                )));
      }
    }

Appbar

一个Material Design应用程序栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。

属性

    actions → List<Widget>
    要在标题小部件后显示的小部件。
    
    automaticallyImplyLeading → bool
    控制是否应该尝试暗示前导小部件为null。
    
    backgroundColor → Color
    用于应用栏材质的颜色。通常这应该与亮度，iconTheme，textTheme一起设置。
    
    bottom → PreferredSizeWidget
    此小部件显示在应用栏的底部。
    
    bottomOpacity → double
    应用栏底部的不透明程度。
    
    brightness → Brightness
    应用栏材质的亮度。通常，这与backgroundColor，iconTheme，textTheme一起设置。
    
    centerTitle → bool
    标题是否应该居中。
    
    elevation → double
    将此应用栏相对于其父级放置的z坐标。
    
    flexibleSpace → Widget
    此小组件堆叠在工具栏和标签栏后面。它的高度与应用栏的整体高度相同。
    
    iconTheme → IconThemeData
    用于应用栏图标的颜色，不透明度和大小。通常，这与backgroundColor，brightness，textTheme一起设置。
    
    leading → Widget
    要在标题之前显示的小部件。
    
    preferredSize → Size
    高度为kToolbarHeight和底部窗口小部件首选高度之和的大小。
    
    primary → bool
    此应用栏是否显示在屏幕顶部
    
    textTheme → TextTheme
    应用栏中用于文本的排版样式。通常，这与亮度 backgroundColor，iconTheme一起设置。
    
    title → Widget
    appbar中显示的主要小部件。
    
    titleSpacing → double
    横轴上标题内容 周围的间距。即使没有前导内容或操作，也会应用此间距。如果希望 title占用所有可用空间，请将此值设置为0.0。
    
    toolbarOpacity → double
    应用栏的工具栏部分是多么不透明。

代码

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
    //        title: 'Flutter Code Sample for material.Scaffold',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: AppBar(
              title: Text('My Fancy Dress'),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.playlist_play),
                  tooltip: 'Air it',
    //              onPressed: _airDress,
                ),
                IconButton(
                  icon: Icon(Icons.playlist_add),
                  tooltip: 'Restitch it',
    //              onPressed: _restitchDress,
                ),
                IconButton(
                  icon: Icon(Icons.playlist_add_check),
                  tooltip: 'Repair it',
    //              onPressed: _repairDress,
                ),
              ],
            ));
      }
    }

FlutterLogo

Flutter logo, 以widget形式. 这个widget遵从IconTheme。

用来展示Flutter的logo的

属性

    colors → MaterialColor
    用于绘制徽标的颜色样本，默认情况下为Colors.blue。
    
    curve → Curve
    如果样式，颜色或textColor 发生更改，则会生成徽标动画的曲线。
    
    duration → Duration
    如果更改样式，颜色或 textColor属性，则动画的时间长度。
    
    size → double
    逻辑像素中徽标的大小。
    
    style → FlutterLogoStyle
    是否以及在何处绘制“颤动”文本。默认情况下，仅绘制徽标本身。
    
    textColor → Color
    用于在徽标上绘制“Flutter”文本的颜色，如果样式为 FlutterLogoStyle.horizo​​ntal或FlutterLogoStyle.stacked。适当的颜色是const Color(0xFF616161)（中灰色），白色背景。

代码

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return FlutterLogo(
          textColor: Color(0xFF616161),
          duration: Duration(milliseconds: 750),
          style: FlutterLogoStyle.markOnly,
        );
      }
    }

Placeholder

一个绘制了一个盒子的的widget，代表日后有widget将会被添加到该盒子中

属性

    color → Color
    绘制占位符框的颜色。

    fallbackHeight → double
    占位符处于无限高度的情况下使用的高度。
    
    fallbackWidth → double
    占位符处于无限宽度的情况下使用的宽度。
    
    strokeWidth → double
    占位符框中行的宽度。

代码

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Placeholder(
          fallbackWidth: 100.0,
          fallbackHeight: 100.0,
          color: Colors.orange,
        );
      }
    }