flutter 具有垂直边界的双放射性容器

dgenwo3n  于 2023-08-07  发布在  Flutter
关注(0)|答案(1)|浏览(98)

我试图得到这样的结果:


的数据
使用此代码:

Container(
    padding: const EdgeInsets.only(top: 14, bottom: 14),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Center(
            child: Container(
              child: Text('Remove'),
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: Container(
              child: Text('Edit'),
            ),
          ),
        ),
      ],
    ),
)

字符串
这就是我得到的(我不能有正确的边界)。


jrcvhitl

jrcvhitl1#

输出量:


的数据
实施(见评论):

class Example extends StatelessWidget {
  const Example({super.key, this.height = 48.0, required this.borderWidth});

  /// The height of this widget is shared between the buttons and the border.
  final double height;

  /// The width of the border is shared between the buttons and the border.
  final double borderWidth;

  /// ... Any more properties you need ...

  @override
  Widget build(BuildContext context) {
    const buttonCornerRadius = Radius.circular(8.0);

    return Container(
      height: height,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey, width: borderWidth),

        /// We want the bottom left and right corners to be rounded.
        borderRadius: const BorderRadius.only(
          bottomLeft: buttonCornerRadius,
          bottomRight: buttonCornerRadius,
        ),
      ),

      /// We want to lay out our content in a row.
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          /// The width of the elements should be calculated to be the width of
          /// the widest label; this will maintain visual consistency between
          /// buttons with labels of different lengths.
          /// 
          /// Implementations on how to get this are omitted for brevity.
          const SizedBox(
            width: 104.0,
            child: Text("Remove", textAlign: TextAlign.center),
          ),

          /// This container mimics a border with the same properties as the parent.
          Container(width: borderWidth, height: height, color: Colors.grey),
          const SizedBox(
            width: 104.0,
            child: Text("Edit", textAlign: TextAlign.center),
          ),
        ],
      ),
    );
  }
}

字符串

相关问题