TextField、Radio、RaisedButton组件练习Demo

main.dart

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';
void main() {
  runApp(TextFieldPage());
}
//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class TextFieldPage extends StatefulWidget {
  TextFieldPage({Key key}) : super(key: key);
  _TextFieldPageState createState() => _TextFieldPageState();
}
class _TextFieldPageState extends State {
  String userName;
  int sex = 1;
  int index = 1;
  bool flag = true;
  List lists = [
    {"checked": true, "title": "篮球"},
    {"checked": false, "title": "足球"},
    {"checked": false, "title": "羽毛球"},
    {"checked": true, "title": "乒乓球"},
  ];
  List _getLists() {
    List tempList = [];
    for (var i = 0; i < lists.length; i++) {
      tempList.add(Row(
        children: [
          Text(this.lists[i]["title"] + ":"),
          Checkbox(
            value: this.lists[i]["checked"],
            onChanged: (value) {
              setState(() {
                this.lists[i]["checked"] = value;
              });
            },
          )
        ],
      ));
    }
    return tempList;
  }
  void _sexChanged(value) {
    setState(() {
      this.sex = value;
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("学员登记系统"),
        ),
        //内容区域
        body: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(hintText: "输入用户信息"),
                onChanged: (value) {
                  setState(() {
                    this.userName = value;
                  });
                },
              ),
              SizedBox(
                height: 30,
              ),
              Row(
                children: [
                  Text("男："),
                  Radio(
                    value: 1,
                    onChanged: this._sexChanged,
                    groupValue: this.sex,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Text("女："),
                  Radio(
                    value: 2,
                    onChanged: this._sexChanged,
                    groupValue: this.sex,
                  ),
                ],
              ),
              SizedBox(
                height: 30,
              ),
              //爱好
              Column(
                children: this._getLists(),
              ),
              Container(
                //容器自适应宽度
                width: double.infinity,
                height: 45,
                child: RaisedButton(
                  child: Text("提交信息"),
                  onPressed: () {
                    print(this.userName);
                    print(this.sex == 1 ? "男" : "女");
                    print(this.lists);
                  },
                  color: Colors.blue,
                  textColor: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

运行结果：



作者：蓝枫amy
                    

 
                


                            demo
                            radio