Flutter常用控件

最新推荐文章于 2025-05-21 14:52:53 发布

平安（it'you）

最新推荐文章于 2025-05-21 14:52:53 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter学习之路文章标签： flutter

本文链接：https://blog.youkuaiyun.com/ioccc785/article/details/120184462

flutter学习之路专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Flutter中常用的UI控件，包括富文本、普通文本、 ElevatedButton、FlatButton、OutlineButton、TextButton、ListView及DropdownButton的使用方法，展示了它们在实际应用中的布局和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
                  )
              )
          ),
        ],
      );

  }
}

Textfiled控件

   Container(
                padding: EdgeInsets.all(8),
                width: 300,
                child: TextField(
                    decoration: InputDecoration(
                  border: OutlineInputBorder(
                    ///设置边框四个角的弧度
                    borderRadius: BorderRadius.all(Radius.circular(10)),
                    ///用来配置边框的样式
                    borderSide: BorderSide(
                      ///设置边框的颜色
                      color: Colors.red,
                      ///设置边框的粗细
                      width: 1.0,
                    ),
                  ),
                )),
              ),

Flutter控件使用简单demo（屏幕自适应宽高，循环生成下拉按钮）

import 'dart:ffi';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


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

class MyApp extends StatelessWidget {



  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: '排胶进炉',
        home: Scaffold(
          appBar: AppBar(
            title: Text("排胶进炉"),
          ),
          body: ChooseContentr(),
        ));

  }


}

List<DropdownMenuItem<String>> dr = [];
class ChooseContentr extends StatelessWidget {

  const ChooseContentr({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChooseContent();
  }
}

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

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


class _ChooseContent extends State<ChooseContent> {

  var _selectType;

  List<DropdownMenuItem> j = fuck() ;

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
    return
      Container(
        //  防止被软键盘遮挡，最外层加Container里嵌套SingleChildScrollView
        child: SingleChildScrollView(
          child: Column(
            children: [

              Row(
                // crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    padding: EdgeInsets.all(8),
                    width:ScreenUtil().setWidth(500).toDouble(),
                    child: TextField(
                        decoration: InputDecoration(
                          border: OutlineInputBorder(

                            ///设置边框四个角的弧度
                            borderRadius: BorderRadius.all(Radius.circular(10)),

                            ///用来配置边框的样式
                            borderSide: BorderSide(

                              ///设置边框的颜色
                              color: Colors.red,

                              ///设置边框的粗细
                              width: 1.0,
                            ),
                          ),
                        )),
                  ),
                  SizedBox(
                    width: 8,
                  ),
                  OutlineButton(
                    onPressed: () => null,
                    child: Text("扫描工单"),
                  ),
                ],
              ),
              Row(
                children: [

                  info(),
                  Text(
                    "互检人：", style: TextStyle(
                    fontSize: 15,
                  ),
                  ),
                  Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.black26),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),

                      padding: EdgeInsets.all(8),

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

                          //重点在这里，因为用编辑器写Column生成的children后面会跟一个<Widget>[]，
                          //此时如果我们直接把生成的tiles放在<Widget>[]中是会报一个类型不匹配的错误，把<Widget>[]删了就可以了
                        ),
                      )

                  ),

                ],
              ),
              Row(
                children: [
                  info2(),
                  info2(),
                ],
              ),
              Row(
                children: [
                  info2(),
                  info2(),
                ],

              ),
              Row(
                children: [
                  Text("摆放位置："),
                  info3(),
                  Text("栋"),
                  info4(),
                ],
              ),
              Container(
                  height: 150,
                  child: ListView(
                    children:
                    List.generate(4, (index) {
                      return Container(
                        height: 50,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.red),
                        ),
                        child: Text("第${index + 1}栋：${index}层"),
                      );
                    }),

                  )),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(width: 10),
                  OutlineButton(onPressed: () => null,
                    color: Colors.red,
                    focusColor: Colors.red,
                    child: Text("暂存"),),
                  OutlineButton(onPressed: () => null,
                    color: Colors.red,
                    focusColor: Colors.red,
                    child: Text("保存"),),
                  SizedBox(width: 10),
                ],
              ),

            ],
          ),
        ),
      );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      width:ScreenUtil().setWidth(350).toDouble(),
      child: TextField(
          decoration: InputDecoration(
            labelText: "进炉人",
            border: OutlineInputBorder(

              ///设置边框四个角的弧度
              borderRadius: BorderRadius.all(Radius.circular(10)),

              ///用来配置边框的样式
              borderSide: BorderSide(

                ///设置边框的颜色
                color: Colors.red,

                ///设置边框的粗细
                width: 1.0,
              ),
            ),
          )),
    );
  }
}

var message = "光芒胜过夜晚繁星";

class info2 extends StatelessWidget {
  TextEditingController _textEditingController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    this._textEditingController.text = message;
    return Container(
      padding: EdgeInsets.all(8),
      width:ScreenUtil().setWidth(350).toDouble(),
      child: TextField(
          controller: _textEditingController,

          readOnly: true,
          decoration: InputDecoration(
            labelText: "信息",
            border: OutlineInputBorder(

              ///设置边框四个角的弧度
              borderRadius: BorderRadius.all(Radius.circular(10)),

              ///用来配置边框的样式
              borderSide: BorderSide(

                ///设置边框的颜色
                color: Colors.red,

                ///设置边框的粗细
                width: 1.0,
              ),
            ),
          )),

    );
  }
}

TextEditingController _textEditingController = new TextEditingController();

class info4 extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      width:ScreenUtil().setWidth(350).toDouble(),
      child: TextField(
          controller: _textEditingController,
          keyboardType: TextInputType.number,

          decoration: InputDecoration(
            labelText: "层",
            border: OutlineInputBorder(

              ///设置边框四个角的弧度
              borderRadius: BorderRadius.all(Radius.circular(10)),

              ///用来配置边框的样式
              borderSide: BorderSide(

                ///设置边框的颜色
                color: Colors.red,

                ///设置边框的粗细
                width: 1.0,
              ),
            ),
          )),

    );
  }
}

var _selectSide;

class info3 extends StatefulWidget {
  @override
  _info3State createState() => _info3State();
}

class _info3State extends State<info3> {
  TextEditingController _textEditingController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    this._textEditingController.text = message;
    return Container(
      padding: EdgeInsets.all(8),
      width:ScreenUtil().setWidth(200).toDouble(),
      child: new DropdownButtonHideUnderline(
          child: new DropdownButton(

            items: [
              new DropdownMenuItem(
                child: new Text('1'),
                value: '1',
              ),
              new DropdownMenuItem(
                child: new Text('2'),
                value: '2',
              ),
              new DropdownMenuItem(
                child: new Text('3'),
                value: '3',
              ),
              new DropdownMenuItem(
                child: new Text('4'),
                value: '4',
              ),
            ],

            hint: new Text('请选择'),
            onChanged: (value) {
              setState(() {
                _selectSide = value;
                print(_selectSide + _textEditingController.text);
              });
            },

//              isExpanded: true,
            value: _selectSide,
            elevation: 24,
            //设置阴影的高度
            style: new TextStyle( //设置文本框里面文字的样式
              color: Color(0xff4a4a4a),
              fontSize: 12,
            ),
//              isDense: false,//减少按钮的高度。默认情况下，此按钮的高度与其菜单项的高度相同。如果isDense为true，则按钮的高度减少约一半。 这个当按钮嵌入添加的容器中时，非常有用
            iconSize: 40.0,
          )
      ),

    );
  }
}

 List<DropdownMenuItem> fuck(){


  var formList = [
    {"title": '车牌号'},
    {"title": '所有人'},
    {"title": '号牌颜色'},
  ];
  int i = 1;

  for(var item in formList){
    i++;
    print(item.values);
    dr.add(

        new DropdownMenuItem(
          child: new Text(item.values.toString()),
          value: item.values.toString() ,
        )
    );
  }
return dr;
}