無狀態(tài)的StatelessWidget常用組件

123.jpg

Container

Container({
    Key key,
    this.alignment,  // 顯示方式 左、中、右
    this.padding, // 內(nèi)邊距
    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('基礎(chǔ)組件的使用'),
        ),
        body: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.yellow),
          child: Column(
            children: <Widget>[
              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(
                  '標(biāo)題',
                  style: TextStyle(color: Colors.black),
                  textAlign: TextAlign.center,
                ),
                content: Text('這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容這是內(nèi)容'),
                actions: <Widget>[
                  Text('1'),
                  Text('2'),
                  Text('3'),
                  Text('4'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}