如何使用 flutter 实现此设计？

Question

我尝试使用标签栏来解决它但它没有用

Answer 1

您可以使用ClipRRect小部件：

Scaffold(
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Row(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Container(
                width: 100,
                color: Colors.red,
                child: Text(
                  'Healthy',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(
              width: 10,
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: Container(
                width: 100,
                color: Colors.red,
                child: Text(
                  'Healthy',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );

结果：

Answer 2

Row(
            children: [
              //unselected Chip
              ActionChip(
                onPressed: (){

                },
                shape: StadiumBorder(side: BorderSide()),
                label: Text("History"),
                backgroundColor: Colors.white,
              ),
              //selected Chip
              ActionChip(
                onPressed: (){

                },
                label: Text("Funny Stories"),
                shape: StadiumBorder(side: BorderSide(color: Colors.orange)),
                backgroundColor: Colors.orange,
              )
            ],
          ),

output：