Question

Align(
      alignment: Alignment.bottomCenter,
      child: Container(
          //padding: EdgeInsets.all(20.0),
          height: 50,
          width: 320,
          decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(15.0))),
          child: Stack(children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Transform(
                  alignment: Alignment.topRight,
                  transform: Matrix4.diagonal3Values(4.0, 1.0, 1.0),
                  child: Container(
                      height: 45,
                      width: 45,
                      decoration: BoxDecoration(
                        //color: Color(0xffff8d27),
                        color: Colors.grey,
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.all(Radius.circular(10.0))
                      )),
                ),
            ),
            Row(
              children: <Widget>[
                Expanded(
                  child: Center(
                    child: Text(
                      'Reservation',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
                Align(
                    alignment: Alignment.center,
                    child: Icon(Icons.attach_money)),
                Expanded(
                  child: Center(
                    child: Text(
                      'Now',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
                )
              ],
            )
          ])))

This is the current result

我使用了一个堆栈，最下面的一层是一个灰色的容器，中间对齐了15.0个边框半径，最上层是两个可扩展文本和一个图标。我正在尝试实现双向滑动按钮。我还没有实现滑动部分，但这不会成为问题。当用户在特定的一侧滑动时，位于堆栈底部的堆叠式笔杆底部的灰色容器依次表示一个选择。我正在使用转换窗口小部件在x维度上缩放容器，或者只是简单地说将其拉伸。问题在于，这种变换趋向于扭曲容器的边界半径，而这不会产生期望的效果。如何拉伸或变形容器，以使其不影响边界半径？

Answer 1

final _transformRight = Matrix4.identity()..translate(130.0);
final _transformLeft = Matrix4.identity(); //It means zero.
bool _shouldTransformRight = false;

@override
Widget build(BuildContext context) {
  ...
    body: GestureDetector(
      child: Container(
        ...
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15.0),
        ),
        child: Stack(
          children: <Widget>[
            AnimatedContainer(
              ...
              duration: Duration(milliseconds: 200),
              decoration: BoxDecoration(
                color: Colors.grey,
                //You can create a variable to unify the 
                //borderRadius for all containers. 
                borderRadius: BorderRadius.circular(15.0),
              ),
              transform: _shouldTransformRight
                ? _transformRight 
                : _transformLeft,
            ),
            Row(...),
          ],
        ),
      ),
      onHorizontalDragEnd: (details) {
        setState(() {
          _shouldTransformRight = !_shouldTransformRight;
        });
      }
    ),
 ...
}

我对您的代码所做的编辑摘要：

无需同时为容器提供形状和拐角半径。单独使用其中之一就足够了。
在容器的拐角半径处，我使用BorderRadius.circular(...)而不是BorderRadius.all(...)，因为它更短。
我已将Stack的第一个孩子替换为AnimatedContainer，并使用它的transform参数对其进行了相应定位。 Matrix4.diagonal3Values(4.0, 1.0, 1.0)是边界半径变形的原因。
最后，我将整个小部件树包装在GestureDetector中，以便可以获取用户输入，然后基于该输入我将翻译AnimatedContainer。您可以配置要使用的GestureDetector的回调，这里我使用了onHorizontalDragEnd。

变换使颤动中的容器的边界半径变形

1 个答案: