Flutter基础控件

Text:文字

Text("Flutter")

 Text是最常用也是最基础的,目前学习阶段只用来加载文字数据,更多属性和样式设置请查看源码自己探索。

Flutter基础控件_第1张图片

Button:按钮

Flutter基础控件_第2张图片

 ElevatedButton:普通按钮

ElevatedButton(
  onPressed: () {
    if (kDebugMode) {
      print("ElevatedButton");
    }
  },
  child: const Text("普通按钮"),
),

TextButton:文本按钮

TextButton(
  onPressed: () {
    if (kDebugMode) {
      print("TextButton");
    }
  },
  child: const Text("文本按钮"),
),

 OutlinedButton:带边框按钮

OutlinedButton(
  onPressed: () {
    if (kDebugMode) {
      print("OutlinedButton");
    }
  },
  child: const Text("带边框的按钮"),
),

 IconButton:图片按钮

IconButton(
  onPressed: () {
    if (kDebugMode) {
      print("IconButton");
    }
  },
  icon: const Icon(Icons.thumb_up),
)

 带图片的文本按钮,只需要在各控件后加.icon就可以了

ElevatedButton.icon(
  onPressed: () {
    if (kDebugMode) {
      print('点击了发送按钮');
    }
  },
  icon: const Icon(Icons.send),
  label: const Text("发送"),
),

 自定义样式按钮

 ElevatedButton(
   style: ButtonStyle(
     backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
     foregroundColor:
         MaterialStateProperty.all(Colors.white), //文字图标颜色
   ),
   onPressed: () {
     if (kDebugMode) {
       print("ElevatedButton");
     }
   },
   child: const Text("普通按钮"),
 )

大按钮和设置按钮大小可以在容器里面设置按钮 

Container(
  width: 100,
  height: 60,
  margin: const EdgeInsets.all(10),
  child: ElevatedButton.icon(
    onPressed: () {},
    icon: const Icon(Icons.search),
    label: const Text("搜索"),
  ),

 加样式的各种圆角和边框按钮

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("圆角"),
    ),
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              bottomRight: Radius.circular(20),
            ),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("任意圆角"),
    ),
    ElevatedButton(
      style: ButtonStyle(
        shape: MaterialStateProperty.all(
          const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(0),
              bottom: Radius.circular(20),
            ),
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("纵横圆角"),
    ),
    SizedBox(
      width: 60,
      height: 60,
      child: ElevatedButton(
        style: ButtonStyle(
          //按钮样式设置
          shape: MaterialStateProperty.all(
            const CircleBorder(
              side: BorderSide(
                width: 2, //边框宽度
                color: Colors.red, //边框颜色
              ),
            ),
          ),
        ),
        onPressed: () {},
        child: const Text("圆形"),
      ),
    ),
  ],
),
const SizedBox(height: 10),
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    OutlinedButton(
      style: ButtonStyle(
        side: MaterialStateProperty.all(
          //修改边框颜色和宽度
          const BorderSide(
            width: 2,
            color: Colors.red,
          ),
        ),
      ),
      onPressed: () {},
      child: const Text("带边框的按钮"),
    )
  ],
),

 完整代码:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

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

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () {
                if (kDebugMode) {
                  print("ElevatedButton");
                }
              },
              child: const Text("普通按钮"),
            ),
            TextButton(
              onPressed: () {
                if (kDebugMode) {
                  print("TextButton");
                }
              },
              child: const Text("文本按钮"),
            ),
            OutlinedButton(
              onPressed: () {
                if (kDebugMode) {
                  print("OutlinedButton");
                }
              },
              child: const Text("带边框的按钮"),
            ),
            IconButton(
              onPressed: () {
                if (kDebugMode) {
                  print("IconButton");
                }
              },
              icon: const Icon(Icons.thumb_up),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                if (kDebugMode) {
                  print('点击了发送按钮');
                }
              },
              icon: const Icon(Icons.send),
              label: const Text("发送"),
            ),
            TextButton.icon(
              onPressed: () {
                if (kDebugMode) {
                  print('分享');
                }
              },
              icon: const Icon(Icons.share),
              label: const Text("分享"),
            ),
            OutlinedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.add),
              label: const Text("增加"),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色
                foregroundColor:
                    MaterialStateProperty.all(Colors.white), //文字图标颜色
              ),
              onPressed: () {
                if (kDebugMode) {
                  print("ElevatedButton");
                }
              },
              child: const Text("普通按钮"),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                height: 60,
                margin: const EdgeInsets.all(10),
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text("大按钮"),
                ),
              ),
            ),
            Container(
              width: 100,
              height: 60,
              margin: const EdgeInsets.all(10),
              child: ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.search),
                label: const Text("搜索"),
              ),
            )
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("圆角"),
            ),
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      bottomRight: Radius.circular(20),
                    ),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("任意圆角"),
            ),
            ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all(
                  const RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(0),
                      bottom: Radius.circular(20),
                    ),
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("纵横圆角"),
            ),
            SizedBox(
              width: 60,
              height: 60,
              child: ElevatedButton(
                style: ButtonStyle(
                  //按钮样式设置
                  shape: MaterialStateProperty.all(
                    const CircleBorder(
                      side: BorderSide(
                        width: 2, //边框宽度
                        color: Colors.red, //边框颜色
                      ),
                    ),
                  ),
                ),
                onPressed: () {},
                child: const Text("圆形"),
              ),
            ),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            OutlinedButton(
              style: ButtonStyle(
                side: MaterialStateProperty.all(
                  //修改边框颜色和宽度
                  const BorderSide(
                    width: 2,
                    color: Colors.red,
                  ),
                ),
              ),
              onPressed: () {},
              child: const Text("带边框的按钮"),
            )
          ],
        ),
      ],
    );
  }
}

Card:卡片

 Card相当于原生中的CardView控件,用于卡片样式布局。

完整代码:

import 'package:flutter/material.dart';
import 'package:flutter_demo/res/listData.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const MyHomePage(),
      ),
    );
  }
}

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

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

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({super.key});

  List _initCardData() {
    var tempList = listData.map((value) {
      //卡片控件
      return Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), //圆角大小
        elevation: 10, //阴影深度
        margin: const EdgeInsets.all(10),//四周间距
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,//屏幕比例
              child: Image.network(value["imageUrl"], fit: BoxFit.cover),
            ),
            ListTile(
              //ClipOval实现圆角图片设置
              /*leading: ClipOval(
                child: Image.network(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                  width: 40,
                  height: 40,
                ),
              ),*/
              //CircleAvatar实现圆角图片设置
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"]),
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            ),
          ],
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initCardData(),
    );
  }
}

Card控件下的shape属性用于设置卡片样式,elevation属性用于设置卡片阴影深度。

AspectRatio控件设置图片比例。

ListView实现数据列表,相当于原生ScrollView、NestedScrollView、ListView、RecyclerView。

ListTile填充列表数据,title属性添加列表标题,subtitle为副标题,还有更多属性请查看ListTile源码。

CircleAvatar或者ClipOval控件实现圆形图片显示。

数据文件listData.dart

List listData = [
  {
    "title": "图一",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/1.png",
  },
  {
    "title": "图二",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/2.png",
  },
  {
    "title": "图三",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/3.png",
  },
  {
    "title": "图四",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/4.png",
  },
  {
    "title": "图五",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/5.png",
  },
  {
    "title": "图六",
    "author": "程序员",
    "imageUrl": "https://www.itying.com/images/flutter/6.png",
  },
];

你可能感兴趣的:(Flutter,flutter,控件)