Flutter常用控件

最新推荐文章于 2025-06-11 08:53:09 发布

原创

最新推荐文章于 2025-06-11 08:53:09 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

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

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