填充和装饰

Question

我是一名 UI 设计师，正在尝试使用 flutter 进行编码（还没有经验，通过互联网学习）。

我尝试编写一个分段控件，它看起来像这样：在此处输入图像描述

几小时后我就走到了那么远：

 isSelected: isSelected,
                        borderRadius: BorderRadius.circular(12.0),
                        //selectedBorderColor: burple,
                        children: [
                          Container(
                            decoration: ShapeDecoration(
                              color: isSelected[0] == false ? black3 : null,
                              gradient: isSelected[0] == true
                                  ? primaryGradient
                                  : null,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(12),
                                  topLeft: Radius.circular(12),
                                  bottomRight: Radius.circular(12),
                                  topRight: Radius.circular(12),
                                ),
                              ),
                            ),
                            width: MediaQuery.of(context).size.width * 0.3,
                            padding: const EdgeInsets.symmetric(horizontal: 24),
                            child: const Center(child: Text('Events')),
                          ),
                          Container(
                            decoration: ShapeDecoration(
                              color: isSelected[1] == false ? black3 : null,
                              gradient: isSelected[1] == true
                                  ? primaryGradient
                                  : null,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.only(
                                    bottomRight: Radius.circular(12),
                                    topRight: Radius.circular(12)),
                              ),
                            ),
                            width: MediaQuery.of(context).size.width * 0.3,
                            padding: const EdgeInsets.symmetric(horizontal: 24),
                            child: const Center(child: Text('Bars')),

但看起来是这样的：

在此输入图片描述

我不知道如何将它们添加到内部阴影（使其看起来像 3D 药丸）以及如何获得边框之间的填充。抱歉质量不好，我仍在与 android studio 的分辨率作斗争。

我尝试过这个，但阴影总是在外面而不是内部：

Container(
    decoration: ShapeDecoration(
      color: isSelected[0] == false ? black3 : null,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      boxShadow: isSelected[0] == true
          ? [
              BoxShadow(
                color: Colors.black.withOpacity(0.4),
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0,
              ),
              BoxShadow(
                color: Colors.white.withOpacity(0.2),
                offset: Offset(-2.0, -2.0),
                blurRadius: 4.0,
              ),
            ]
          : null,
    ),

对于填充我真的不知道

Answer 1

使用 TabBar

实现此目的的一种方法

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Colors.black87,
    child: Column(
      children: [
        const SizedBox(
          height: 50,
        ),
        Padding(
          padding: const EdgeInsets.all(6.0),
          child: FractionallySizedBox(
            widthFactor: 1,
            child: Container(
              height: 36,
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.circular(
                  10.0,
                ),
              ),
              child: Padding(
                padding: const EdgeInsets.all(4.0),
                child: TabBar(
                  indicatorSize: TabBarIndicatorSize.tab,
                  dividerColor: Colors.transparent,
                  isScrollable: false,
                  controller: _tabController,
                  labelPadding: EdgeInsets.only(left: 8, right: 8),
                  // give the indicator a decoration (color and border radius)
                  indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(
                      16.0,
                    ),
                    color: Colors.deepPurpleAccent,
                  ),
                  labelColor: Colors.white,
                  labelStyle: const TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w400,
                  ),
                  unselectedLabelColor: Colors.black45,
                  tabs: const [
                    Tab(
                      text: 'Events',
                    ),
                    Tab(
                      text: 'Bars',
                      // child: Text("Proceed to Lab (20)",style: TextStyle(fontSize: 12),),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);
}
}

Answer 2

'padding' 用于在其父窗口小部件内的子窗口小部件周围添加空间。 您可以像这样包裹主容器，将阴影作为图像。

 Container(decoration: BoxDecoration(color: Color(0x1A000000)),
              child: Align(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                   your container with segmented control
                  ),
                ),
              ),
            ),