zoukankan      html  css  js  c++  java
  • flutter Placeholder(占位文字和图片等)

    上代码

    import 'package:flutter/material.dart';
    
    void main() {
      runApp( MaterialApp(
        title: 'Flutter gesture',
    //    home: TutorialHome(),
        home: _home(),
      ));
    }
    
    class _home 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(
             MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: ListView(
              children: <Widget>[
            TextField(//提示缩小在输入上方
            decoration:
            InputDecoration(
                fillColor: Colors.blue.shade100,
                filled: true,
                labelText: 'Hello'),
          ),
          TextField(//输入后提示消失,如果输入不符合要求就可以报相应错误(自定义提示语)
            decoration: InputDecoration(
                fillColor: Colors.blue.shade100,
                filled: true,
                hintText: 'Hello',
                errorText: 'error'),
          ),
          TextField(//添加图标
            decoration: InputDecoration(
    
                fillColor: Colors.blue.shade100,
                filled: true,
                helperText: 'help',
                prefixIcon: Icon(Icons.local_airport),
                suffixText: 'airport'),
          ),
          TextField(//输入框添加圆切角
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10.0),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15.0),
    //            borderSide: BorderSide(color: Colors.red,  3.0, style: BorderStyle.solid)//没什么卵效果
                )),
          ),
          Theme(//利用ThemeData改变TextField的边框样色
            data: new ThemeData(primaryColor: Colors.red, hintColor: Colors.blue),
            child: TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10.0),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15.0),
    //            borderSide: BorderSide(color: Colors.red,  3.0, style: BorderStyle.solid)//没什么卵效果
                  )),
            ),
          ),
                Container(//改变边框的粗细,这些TextField的decoration彻底不能满足要求了,需要重构成这种方式,InputDecoration.collapsed可以禁用装饰线,而是使用外面包围的Container的装饰线
                  padding: const EdgeInsets.all(8.0),
                  alignment: Alignment.center,
                  height: 60.0,
                  decoration: new BoxDecoration(
                      color: Colors.blueGrey,
                      border: new Border.all(color: Colors.black54,  4.0),
                      borderRadius: new BorderRadius.circular(12.0)),
                  child: new TextFormField(
                    decoration: InputDecoration.collapsed(hintText: 'hello'),
                  ),
                ),
                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 ,
                ),
              ],
    
    
    
            ),
          ),
        );
      }
    }

    见到就是干

  • 相关阅读:
    OpenCV 2.48配置
    win进入当前文件夹,启动当前文件夹的程序
    C++程序运行效率的10个简单方法
    银行国际清算业务平台架构
    股票证券交易系统架构分析与设计
    负载均衡|六种负载均衡算法
    Intelli IDEA快捷键(配合IdeaVim)(转)
    [易学易懂系列|golang语言|零基础|快速入门|(三)]
    [易学易懂系列|golang语言|零基础|快速入门|(二)]
    [易学易懂系列|golang语言|零基础|快速入门|(一)]
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/11990710.html
Copyright © 2011-2022 走看看