无状态的StatelessWidget常用组件

123.jpg

Container

Container({
    Key key,
    this.alignment,  // 显示方式 左、中、右
    this.padding, // 内边距
    Color color, // 颜色
    Decoration decoration,  // 装饰器
    this.foregroundDecoration,
    double width, // 宽度
    double height, // 高度
    BoxConstraints constraints,
    this.margin, // 外边距
    this.transform, // 动画
    this.child, // 子组件
  })

Text

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  })

Icon

const Icon(
    this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  })

Chip

const Chip({
    Key key,
    this.avatar,
    @required this.label,
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.backgroundColor,
    this.padding,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
  })

Divider 线

const Divider({
    Key key,
    this.height, // 容器的高度，非线的高度，如果想改变线的高度，只能自定义组件
    this.thickness,
    this.indent,
    this.endIndent,
    this.color,
  })

Card 带有圆角，阴影，边框等效果的卡片

const Card({
    Key key,
    this.color,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })

AlertDialog 弹框

const AlertDialog({
    Key key,
    this.title,
    this.titlePadding,
    this.titleTextStyle,
    this.content,
    this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    this.contentTextStyle,
    this.actions,
    this.backgroundColor,
    this.elevation,
    this.semanticLabel,
    this.shape,
  })

import 'package:flutter/material.dart';

class BaseWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('基础组件的使用'),
        ),
        body: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.yellow),
          child: Column(
            children: [
              Text(
                'Hello',
                style: TextStyle(color: Colors.red, fontSize: 30),
              ),
              Icon(
                Icons.android,
                color: Colors.red,
              ),
              CloseButton(),
              BackButton(),
              Chip(
                label: Text('Hello'),
                avatar: Icon(Icons.people),
                deleteIcon: Icon(Icons.delete),
              ),
              Divider(
                height: 10,
                indent: 10,
                color: Colors.red,
              ),
              Card(
                color: Colors.blue,
                elevation: 5,
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('Card'),
                ),
              ),
              AlertDialog(
                title: Text(
                  '标题',
                  style: TextStyle(color: Colors.black),
                  textAlign: TextAlign.center,
                ),
                content: Text('这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容'),
                actions: [
                  Text('1'),
                  Text('2'),
                  Text('3'),
                  Text('4'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}