标签: flutter-widget

我正在尝试在 Flutter App 中创建一个 TextField 小部件，我想在其中允许用户插入这样的文本字符串：

USER-0123456789

其中文本USER（' - ' 字符之前的所有文本）应为红色，其他应为黑色。

现在的问题是我不知道有什么方法可以做到这一点。经过一番研究，我发现我可以通过使用 RichText Widget 来使用普通的 Text Widget 来完成此操作。但是，我不知道 TextField 小部件有任何类似的小部件。请帮助我摆脱这种情况。

我正在使用下面的代码来执行图标的动画增长和缩小动画，但为此，我必须单击图标，一旦我们在屏幕上，我希望动画重复。

return new Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new IconButton(
            onPressed: () {
              setState(() {
                if (_resized) {
                  _resized = false;
                  _height = 20.0;
                } else {
                  _resized = true;
                  _height = 40.0;
                }
              });
            },
            icon: Icon(Icons.calendar_today, size: _height),
            color: _color,
          ),
        ],
      ),
    );

我想要像下面这样外部不断增长和收缩的输出。

我正在制作一个待办事项列表应用程序。我想实现向右滑动删除和向左滑动标记，就像某些电子邮件应用程序一样。

我知道Dismissible Widget可以实现滑动删除， secondaryBackground 可以实现其他滑动方式。但是我不知道当我滑动到其他方式时如何调用其他函数。

return Dismissible(
          // Each Dismissible must contain a Key. Keys allow Flutter to
          // uniquely identify widgets.
          key: Key(item),
          // Provide a function that tells the app
          // what to do after an item has been swiped away.
          onDismissed: (direction) {
            // Remove the item from the data source.
            setState(() {
              items.removeAt(index);
            });
            // Then show a snackbar.
            Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text("$item dismissed")));
          },
          // Show a red background as the item is swiped …

在 Flutter 中聚焦时如何在 TextFormField 中添加阴影？我希望该字段具有以下外观：

到目前为止，我设法在对焦时应用了边框，但我没有看到任何应用阴影的选项：

TextFormField(
  decoration: InputDecoration(
      fillColor: Colors.white,
      hoverColor: Colors.white,
      filled: true,
      enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey, width: 1))),
);

关于如何获得这种效果的任何想法？

我有一个StatelessWidget使用 aScopedModel来存储其数据的。该小部件基本上呈现了复选框列表和一些用于保存复选框状态的按钮。

现在我想跟踪用户是否更改了任何复选框，即自显示小部件以来选中/取消选中它们。所以我添加了这样的内容：

class MyCheckboxScreen extends StatelessWidget{

    bool _hasBeenModified = false;

    void _itemCheckedChange(bool checked, MyModel model){
        _hasBeenModified = true;

        // Code to change the model here
    }


    void _onCloseButton(){
        if( _hasBeenModified ){
            // Show a warning that there are modifications that will not be be saved
        }
    }


    void _onSaveButton(Context context, MyModel model){
        model.save();
        Navigator.of(context).pop();
    }

}

这似乎有效，但我的StatelessWidgetnow 包含它自己的状态。

该状态不用于更新 UI 和重绘任何内容，它仅用于在按下“关闭”按钮时检查任何复选框是否有修改。

StatelessWidgeta拥有这种内部状态安全吗？或者这可能是一个问题？例如，小部件是否会意外重新创建，并且内部状态丢失？

我发现文档对此不是很清楚，它只是说

对于可以动态更改的组合，例如由于具有内部时钟驱动状态或取决于某些系统状态，请考虑使用 StatefulWidget。

但这听起来似乎只适用于影响 UI 并需要重建小部件的状态。

我想实现设置文本宽度和高度其父尺寸。这是我尝试过的，但它不起作用：

Container(\n            height: double.infinity,\n            child: Padding(\n              padding: const EdgeInsets.only(left: 30, right: 30),\n              child: Row(\n                mainAxisAlignment: MainAxisAlignment.spaceBetween,\n                crossAxisAlignment: CrossAxisAlignment.center,\n                children: <Widget>[\n                  GestureDetector(\n                      onTap: () {\n                        _onPagerTabItemClicked(0);\n                      },\n                      child: Container(\n                        width: double.infinity,\n                        height: double.infinity,\n                        child: Text("G\xc3\xbcnl\xc3\xbck",\n                            style: TextStyle(color: getTextColor(0))),\n                      )),\n                  GestureDetector(\n                      onTap: () {\n                        _onPagerTabItemClicked(0);\n                      },\n                      child: Container(\n                        width: double.infinity,\n                        height: double.infinity,\n                        child: Text("G\xc3\xbcnl\xc3\xbck",\n                            style: TextStyle(color: getTextColor(0))),\n                      )),\n                  GestureDetector(\n                      onTap: () {\n                        _onPagerTabItemClicked(0);\n                      },\n                      child: Container(\n                        width: double.infinity,\n                        height: double.infinity,\n                        child: Text("G\xc3\xbcnl\xc3\xbck",\n                            style: TextStyle(color: getTextColor(0))),\n                      )),\n                ],\n              ),\n            ),\n          ),\n

我想向从容器创建的 ClipPath 添加阴影。这是我创建的 ClipPath：

              ClipPath(
                clipper: RibbonClipper(),
                child: Container(
                  height: 20,
                  width: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.0),
                      bottomLeft: Radius.circular(5.0),
                    ),
                    color: Color(0xFF338D5E),
                  ),
                ),
              ), 

CustomClipper 路径是：

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * .90, size.height * .5);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

容器高度设置为固定 40，但是一旦我在 AppBar() 中使用该小部件，它就会采用所有可能的高度。这是我的自定义小部件的代码，它具有固定的容器高度，

class LPBorderButtonWithIcon extends StatelessWidget {
  final GestureTapCallback onPressed;
  final String text;
  final String iconAsset;
  final Color textColor;

  LPBorderButtonWithIcon(
      {@required this.onPressed,
      @required this.text,
      @required this.textColor,
      @required this.iconAsset});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onPressed,
        child: Container(
          height: 40,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              border: Border.all(color: Color(0XFFd8dce1))),
          child: Row(
            children: [
              WidthSizedBox(15),
              Image.asset(
                iconAsset,
                height: 14,
                width: 14,
              ),
              WidthSizedBox(5),
              Text(text,
                  style: TextStyle(
                      color: textColor,
                      fontSize: 12,
                      fontFamily: "GilroyMedium")),
              WidthSizedBox(15),
            ],
          ),
        ));
  }
}

LPBorderButtonWithIcon()我在这个屏幕中使用， …

我有使用 flutter hooks 的非常简单的情况：

class PositionedTiles extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final counterList = useState<List<int>>([1,2,3,4,5]);
    return Scaffold(
        body: Text("Counter: ${counterList.value}"),
        floatingActionButton: FloatingActionButton(
              onPressed: () => counterList.value.removeAt(0),
              child: const Icon(Icons.sentiment_very_satisfied)),
        );
    );
  }

因此，单击后floatingActionButton打印的列表 ( counterList) 不会改变。我的结论是没有调用重建。

为什么 hook 没有看到列表已更改？

如何指示列表 ( counterList) 在调用后已更改onPressed以便重建？

我试图将图标置于圆形背景的中心，但即使我使用中心小部件作为子项，除非增加容器大小，它也会失败。

    Container(
                  height: 22,
                  width: 22,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffF7825C),
                  ),
                  child: Center(
                    child: Icon(
                      Icons.add,
                      color: Colors.white,
                    ),
                  ),
                ) 

我尝试更改 ElevatedButton 的背景颜色，但出现错误。我怎样才能改变它？

ElevatedButton(
  onPressed: null,
  style: ButtonStyle(backgroundColor: Colors.red), // Error
}

当用户单击按钮时，我试图从 firebase 中删除数据。

await context线路有问题！

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Divider(
          height: 3,
        ),
        ListTile(
          title: Text('security').tr(),
          leading: Container(
            height: 30,
            width: 30,
            decoration: BoxDecoration(
                color: Colors.red, borderRadius: BorderRadius.circular(5)),
            child: Icon(Feather.lock, size: 20, color: Colors.white),
          ),
          trailing: Icon(
            Feather.chevron_right,
            size: 20,
          ),
          onTap: () => _openDeleteDialog(context),
        ),
      ],
    );
  }

  _openDeleteDialog(context) {
    return showDialog(
        barrierDismissible: true,
        context: context,
        builder: (context) {
          return AlertDialog(
            title: …