Flutter基础控件

最新推荐文章于 2025-07-26 18:52:21 发布

原创

最新推荐文章于 2025-07-26 18:52:21 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #控件

Text:文字

Text("Flutter")

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

Button:按钮

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(