flutter 组件 Placeholder,ButtonBar,PopupMenuButton,自定义组件

最新推荐文章于 2025-04-01 07:00:00 发布

原创最新推荐文章于 2025-04-01 07:00:00 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #PopupMenuButton #ButtonBar #自定义组件

flutter 专栏收录该内容

29 篇文章

订阅专栏

本文深入探讨了Flutter框架中的UI组件，包括占位符(Placeholder)的样式调整、按钮组(ButtonBar)的布局策略、导航菜单(PopupMenuButton)的定制化实现，以及自定义渐变按钮(GradientButton)的设计与应用。通过具体实例，展示了如何灵活运用这些组件来构建美观且功能丰富的用户界面。

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

1.Placeholder 占位符

Placeholder(
     color: Colors.tealAccent,  //颜色
     strokeWidth: 2.0,  //线条宽度
     fallbackHeight: 50.0, //无边界时候的高度
     fallbackWidth: 50.0,  //无边界时候的宽度
),

2.ButtonBar 按钮组

ButtonBar(
     alignment: MainAxisAlignment.end,
     children: <Widget>[
        RaisedButton(
           child: Text("111"),
             onPressed: () => {},
           ),
           RaisedButton(
             child: Text("222"),
             onPressed: () => {},
        ),
     ],
)

3.PopupMenuButton 导航悬浮的菜单

 const PopupMenuButton({
    Key key,
    @required this.itemBuilder, 
    this.initialValue, //初始值，如果itemBuilder里该值，则会高亮显示
    this.onSelected, //选中弹出弹出选项的回调
    this.onCanceled, 点屏幕外取消回调,点击屏幕其他地方时调用
    this.tooltip,
    this.elevation = 8.0,
    this.padding = const EdgeInsets.all(8.0),
    this.child, //修改PopupMenuButton默认三个点的图标为设置的child，不能与icon同时使用
    this.icon, //修改PopupMenuButton默认三个点的图标为设置的icon，不能与child同时使用
    this.offset = Offset.zero,
    this.enabled = true,
  })

const PopupMenuItem({
    Key key,
    this.value, //值
    this.enabled = true, //可用否
    this.height = _kMenuItemHeight, //高度
    @required this.child,
  })

const PopupMenuDivider({ Key key, this.height = _kMenuDividerHeight })

//checkbox类型
const CheckedPopupMenuItem({
    Key key,
    T value,
    this.checked = false,  //是否选中
    bool enabled = true,
    Widget child,
})

import 'package:flutter/material.dart';

class Com extends StatelessWidget {
  List _list = ["分享", "选择", "收藏"];
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义组件"),
        actions: <Widget>[
          PopupMenuButton(
              child: Icon(Icons.more), //点击此子Widget，显示菜单
              //选择的事件
              onSelected: (val) {
                print(val); //value值
              },
              itemBuilder: (ctx) {
                var list = new List<PopupMenuEntry>();
                for (int i = 0; i < _list.length; i++) {
                  if (i != _list.length - 1) {
                    list.addAll([
                      //菜单项
                      PopupMenuItem(child: Text(_list[i]), value: _list[i]),
                      //下划线
                      PopupMenuDivider(
                        height: 1.0,
                      )
                    ]);
                  } else {
                    list.addAll([
                      //菜单项
                      PopupMenuItem(
                        child: Text(_list[i]),
                        value: _list[i],
                      )
                    ]);
                  }
                }
                print(list);
                return list.toList();
              })
        ],
      ),
      body: Column(
        children: <Widget>[
          
        ],
      ),
    );
  }
}

4.自定义组件 GradientButton

import 'package:flutter/material.dart';

class GradientButton extends StatelessWidget {
  GradientButton(
      {this.colors, this.width, this.height, @required this.child, this.onTap});

  final List<Colors> colors;  //渐变颜色

  final double width; //宽度

  final double height; //高度

  final Widget child;  //子集

  final GestureTapCallback onTap; //点击事件

  @override
  Widget build(BuildContext context) {
    ThemeData _theme = Theme.of(context);  //主题

    List<Color> _colors = colors ??
        [_theme.primaryColor, _theme.primaryColorDark ?? _theme.primaryColor];
    // TODO: implement build
    return Ink(
      decoration: BoxDecoration(
          //渐变背景
          gradient: LinearGradient(
            colors: _colors,
          ),
          borderRadius: BorderRadius.circular(20.0)),
      child: InkWell( //按钮的波纹特效
        onTap: onTap,
        customBorder: //设置圆形按钮
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
        splashColor: Colors.greenAccent, //波纹颜色
        child: Container(
            width: width,
            height: height,
            padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0),
            child: child),
      ),
    );
  }
}

//在InkWell里面和外面不能设置背景，如果在Container设置Color，那么波纹就会被覆盖
//用Ink覆盖在外面，显示背景

GradientButton(
    child: Text("自定义按钮"),
    onTap: () {
       print("111");
    },
),