Flutter 系列文章：Flutter PlaceHolder 控件介绍

Flutter PlaceHolder 控件介绍

一、使用方法

Placeholder({
    Key key,
    this.color = const Color(0xFF455A64), // 设置占位符颜色 defalutBlue Grey 700 
    this.strokeWidth = 2.0,//设置画笔宽度
    this.fallbackWidth = 400.0,//设置占位符宽度
    this.fallbackHeight = 400.0,//设置占位符高度
  })
复制代码

二、一个完整的例子

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: MyHomePage(title: 'Text Demo'),
    );
  }
}


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {
    var _name = "flutter ";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: ListView(
          children: <Widget>[
            Icon(
              Icons.access_alarm,//设置使用哪种图标
              size: 300,//设置图标大小
              color: Colors.yellow,//设置图标颜色
              textDirection:TextDirection.rtl ,//设置用于渲染图标的文本方向
              semanticLabel: "语义标签",//设置用于渲染图标的文本方向
            ),

            Placeholder(
              color: Colors.blue,// 设置占位符颜色 defalutBlue Grey 70
              strokeWidth: 5,//设置画笔宽度
              fallbackHeight: 200,//设置占位符宽度
              fallbackWidth: 200,//设置占位符高度
            ),

            Icon(
              Icons.build,
              size: 300,
              color: Colors.green,
              textDirection:TextDirection.ltr ,
            ),
          ],

        ),
      ),
    );
  }
}




复制代码

转载于:https://juejin.im/post/5c909d9df265da611b1ec99b