[移动开发]Flutter常用控件

Flutter常用控件
1.富文本控件

class richText extends StatelessWidget {
  const richText({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text.rich(TextSpan(
      children: [
        TextSpan( text: "hello world",
            style: TextStyle(
                fontSize: 20,
                color: Colors.red
            )
        ),
        WidgetSpan(child: Icon(Icons.favorite,color: Colors.amber,)),
        TextSpan( text: "hello world",
            style: TextStyle(
                fontSize: 20,
                color: Colors.green
            )
        )
      ],

    )

    );
  }
}

2.文本控件

class TextWidget extends StatelessWidget {
  const TextWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text("阿是大\n法官寒假大萨达撒撒的撒多萨达多\n撒多撒多快乐",

      style: TextStyle(
          fontSize: 30,
          color: Colors.red

      ),
      textAlign: TextAlign.center,);
  }
}

3.按钮控件

class _HomeBodyState extends State<HomeBody> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children:<Widget> [
        //1.凸起
       ElevatedButton(onPressed: ()=>null, child: Icon(Icons.add)),
        //2.平整
        FlatButton(onPressed: ()=>null,color: Colors.amberAccent, child: Icon(Icons.add)),
        //
        OutlineButton(onPressed: ()=>null,color: Colors.red,focusColor:Colors.red,child: Icon(Icons.add),),
        TextButton.icon(onPressed: ()=>null, icon: Icon(Icons.add), label: Text("label")),
        FlatButton(onPressed: ()=>null, color:  Colors.orange,child: Row(

          children: [
            Icon(Icons.add),

            Text("点击")
          ],
        ))
      ],

    );
  }
}

4.Listview列表控件

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'QGS Flutter',
      home:Scaffold(
          appBar:new AppBar(
              title:new Text('ListView Widget')
          ),
          body: new ListView(
              children:<Widget>[
                new ListTile(
                    leading:new Icon(Icons.access_time),
                    title:new Text('access_time')
                ),
                new ListTile(
                    leading:new Icon(Icons.access_time),
                    title:new Text('access_time')
                ),
                new ListTile(
                    leading:new Icon(Icons.access_time),
                    title:new Text('access_time')
                )
              ]
          )
      ),
    );
  }
}

5.下拉框

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'QGS Flutter',
        home: Scaffold(
      body:ChooseContent(),
        )
    );
  }
}

class ChooseContent extends StatefulWidget {
  const ChooseContent({Key? key}) : super(key: key);

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

class _ChooseContent extends State<ChooseContent> {
 var _selectType ;
  @override
  Widget build(BuildContext context) {

    return
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Container(

              height: 35,
              width: MediaQuery.of(context).size.width - 140,
              decoration: BoxDecoration(
                  border:Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) )
              ),
              child: new DropdownButtonHideUnderline(

                  child: new DropdownButton(

                    items: [
                      new DropdownMenuItem(
                        child: new Text('同意'),
                        value: '同意',
                      ),
                      new DropdownMenuItem(
                        child: new Text('拒绝'),
                        value: '拒绝',
                      ),
                    ],
                    hint: new Text('请选择'),
                    onChanged: (value){
                      setState(() {
                        _selectType = value;
                      });
                    },
//              isExpanded: true,
                    value: _selectType,
                    elevation: 24,//设置阴影的高度
                    style: new TextStyle(//设置文本框里面文字的样式
                      color: Color(0xff4a4a4a),
                      fontSize: 12,
                    ),
//              isDense: false,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
                    iconSize: 40.0,
                  )
              )
          ),
        ],
      );

  }
}