选择框和输入框

2020-01-15  本文已影响0人  spades_K
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开关、输入框、进度器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  bool _switchSeleted = true; // 维护单选开关状态
  bool _checkboxSelected = true; // 维护复选框状态

  FocusNode _fnode1 = FocusNode();
  FocusNode _fnode2 = FocusNode();
  FocusNode _tempfn;

  TextEditingController _textChangeC = TextEditingController(); //控制器(监听器)

  @override
  // 重写
  void initState(){
    super.initState();
    _textChangeC.addListener((){
      print(_textChangeC.text);
    });

    _fnode2.addListener((){
      print(_fnode1.hasFocus);
    });

    _fnode1.addListener((){
      print(_fnode1.hasFocus);
    });
  }

  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '********************开关********************',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.red,
                fontSize: 20,
              ),
            ),
            Switch(
              value: _switchSeleted,
              onChanged: (newValue){
                // 重新构建界面
                setState(() {
                  _switchSeleted = newValue;
                });
              },
            ),
            Checkbox(
              value: _checkboxSelected,
              activeColor: Colors.red, // 选中颜色
              onChanged: (newValue){
                setState(() {
                  _checkboxSelected = newValue;
                });
              },
            ),
            Text(
              '********************输入框*****************',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: Colors.red,
                fontSize: 20,
              ),
            ),
            TextField(
              autofocus: true,
              onChanged: (v){
                print(v);
              },
              focusNode: _fnode1,
              decoration: InputDecoration(
                labelText: '用户名',
                hintText: '用户名或邮箱',
                prefixIcon: Icon(Icons.people),
              ),
            ),
            TextField(
              autofocus: false,
              controller: _textChangeC,
              focusNode: _fnode2,
              decoration: InputDecoration(
                labelText: '密码',
                hintText: '您的密码',
                prefixIcon: Icon(Icons.lock),
              ),
              obscureText: true, // 加密显示
            ),
            RaisedButton(
              child: Text('移动焦点'),
              onPressed: (){
                if(_tempfn == null){
                  _tempfn = FocusScope.of(context);
                  return;
                }
                _tempfn.requestFocus(_fnode1);
              },
            ),
            RaisedButton(
              child: Text('隐藏焦点'),
              onPressed: (){
                _fnode1.unfocus();
                _fnode2.unfocus();
              },
            ),
          ],
        ),
      ),
    );
  }
}

效果图
上一篇 下一篇

猜你喜欢

热点阅读