Flutter中點擊卡片時，想給個邊框顏色，卡片可以選中

  class PopUpCard extends StatefulWidget {
  final String title;
  const PopUpCard({super.key, required this.title});
}
  Container(
              child: Card(
                child: Center(
                    child: Text(
                  widget.title,
                
                )),
              ),

我正在呼叫我在主頁上創建的小部件。

 Row(
                children: const [
                  PopUpCard(
                    title: '9',
                  ),

例如，當點擊卡號 9 時，如圖所示，我希望它周圍有一個紅色邊框。

uj5u.com熱心網友回復：

首先，在該小部件的頂部宣告一個布爾變數：

bool isSelected = false;

然后根據該布林值在容器上設定邊框：

 Container(
      height: 80,
      width: 80,
      decoration: BoxDecoration(
       border: isSelected ? Border.all(color: Colors.red, width: 2,) : null
       ),
      child: Card(
        color: Color.fromARGB(255, 19, 85, 144),
        child: Center(
            child: Text(
          widget.title,
          style: GoogleFonts.poppins(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold),
        )),
      ),

然后用小部件包裝你的小部件，在方法屬性GestureDetector中切換 isSelected ，并更新狀態onTap

 GestureDetector(
    onTap: () {
    isSelected = !isSelected;
    SetState(() {});
    },
    child: Container(
          height: 80,
          width: 80,
          decoration: BoxDecoration(
           border: isSelected ? Border.all(color: Colors.red, width: 2,) : null
           ),
          child: Card(
            color: Color.fromARGB(255, 19, 85, 144),
            child: Center(
                child: Text(
              widget.title,
              style: GoogleFonts.poppins(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold),
            )))),

uj5u.com熱心網友回復：

這部分將完成作業，

 Container(
  height: 80,
  width: 80,
  decoration: BoxDecoration(
    color: Color.fromARGB(255, 19, 85, 144),
    borderRadius: isTapped ? BorderRadius.circular(24) : null,
    border:
        isTapped ? Border.all(color: Colors.red, width: 4) : null,
  ),
  alignment: Alignment.center,
  child: Text("Button"),
),

class TFW extends StatefulWidget {
  const TFW({super.key});

  @override
  State<TFW> createState() => _TFWState();
}

class _TFWState extends State<TFW> {
  final data = List.generate(4, (index) => 9   index);

  /// because `data` is List of int
  int? selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          ...data.map(
            (i) => GestureDetector(
              onTap: () {
                selectedIndex = i;
                setState(() {});
              },
              child: AnimatedContainer(
                duration: Duration(milliseconds: 100),
                height: 80,
                width: 80,
                decoration: BoxDecoration(
                  color: Color.fromARGB(255, 19, 85, 144),
                  borderRadius:
                      selectedIndex == i ? BorderRadius.circular(24) : null,
                  border: selectedIndex == i
                      ? Border.all(color: Colors.red, width: 4)
                      : null,
                ),
                alignment: Alignment.center,
                child: Text("Button"),
              ),
            ),
          )
        ],
      ),
    );
  }
}

你也可以使用AnimatedContainer

uj5u.com熱心網友回復：

您可以通過創建臨時變數來做到這一點，如下所示

String selectedTitle = '';



GestureDetectore(
   onTap:() {
setState((),{
     selectedTitle = widget.title;
});
},
    Container(
              height: 80,
              width: 80,
              child: Card(
                color: Color.fromARGB(255, 19, 85, 144),
    shape: RoundedRectangleBorder( 
        side: BorderSide(
          color: widget.title == selectedTitle ? Colors.red : Colors.transparent,
        ),
      ),
                child: Center(
                    child: Text(
                  widget.title,
                  style: GoogleFonts.poppins(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                )),
              ),),

uj5u.com熱心網友回復：

List<int> listSelected = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test")),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {
              if (listSelected.contains(index)) {
                listSelected.remove(index);
              } else {
                listSelected.add(index);
              }
              setState(() {});
            },
            child: Container(
              height: 80,
              width: 80,
              decoration: BoxDecoration(
                  border: listSelected.contains(index)
                      ? Border.all(color: Colors.red, width: 2)
                      : null),
              child: Card(
                color: Color.fromARGB(255, 19, 85, 144),
                child: Center(
                  child: Text(
                    index.toString(),
                    style: GoogleFonts.poppins(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );

標籤：扑镖颤振布局

上一篇：在_WidgetsAppState中找不到路由RouteSettings("/route",null)的生成器

下一篇：如何覆寫列舉的“名稱”屬性？