代码之家  ›  专栏  ›  技术社区  ›  heyr

如何突出显示所选卡的边框?

  •  0
  • heyr  · 技术社区  · 6 年前

    This is my card

    我想突出显示这个卡的边界每当被选中,所以用户将看到特定的卡已被选中。

    2 回复  |  直到 6 年前
        1
  •  5
  •   Ajay Kumar    6 年前

    试试这个!

    结果: demo

    代码:

    import 'package:flutter/material.dart';
    
    void main() => runApp(
          new MaterialApp(
            home: new MyApp(),
          ),
        );
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => new _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("NonstopIO"),
          ),
          body: new ListView.builder(
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return new MyCustomWidget(
                title: "Title $index",
                subtitle: "$index",
              );
            },
          ),
        );
      }
    }
    
    class MyCustomWidget extends StatefulWidget {
      final String title;
      final String subtitle;
    
      const MyCustomWidget({Key key, this.title, this.subtitle}) : super(key: key);
    
      @override
      _MyCustomWidgetState createState() => _MyCustomWidgetState();
    }
    
    class _MyCustomWidgetState extends State<MyCustomWidget> {
      bool selected = false;
    
      @override
      Widget build(BuildContext context) {
        return new Card(
          shape: selected
              ? new RoundedRectangleBorder(
                  side: new BorderSide(color: Colors.blue, width: 2.0),
                  borderRadius: BorderRadius.circular(4.0))
              : new RoundedRectangleBorder(
                  side: new BorderSide(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(4.0)),
          child: new Padding(
            padding: const EdgeInsets.all(4.0),
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(widget.title),
                new Text(widget.subtitle),
                new Checkbox(
                    value: selected,
                    onChanged: (value) {
                      setState(() {
                        selected = value;
                      });
                    })
              ],
            ),
          ),
        );
      }
    }
    
        2
  •  0
  •   heyr    6 年前

    我发现了一些有用的东西,和我想达到的目标相似。 Flutter - I want to select the card by onLongPress?