如何给 ExpansionPanelRadio 小部件添加阴影?

huangapple go评论90阅读模式
英文:

How to give shadow to ExpansionPanelRadio widget?

问题

我正在使用ExpansionPanelList.radio来在屏幕上显示一系列常见问题(FAQs)。由于children属性只接受ExpansionPanel小部件的列表,我无法给ExpansionPanelRadio小部件添加阴影。是否有任何方法可以像下面这样给它添加阴影:

如何给 ExpansionPanelRadio 小部件添加阴影?

以下是代码:

class FaqsScreen extends StatelessWidget {
  FaqsScreen({Key key}) : super(key: key);

  final List<int> _faqData = List.generate(5, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: ExpansionPanelList.radio(
              elevation: 0,
              expandedHeaderPadding: EdgeInsets.zero,
              children: _faqData
                  .map(
                    (faq) => ExpansionPanelRadio(
                      value: _faqData.indexOf(faq),
                      canTapOnHeader: true,
                      headerBuilder: (context, isExpanded) => ListTile(
                        contentPadding: EdgeInsets.zero,
                        title: Text('1. Lorem Ipsum is simply dummy text?'),
                      ),
                      body: Column(
                        children: [
                          Divider(),
                          Text(
                            'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
                          ),
                        ],
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}
英文:

I'm using ExpansionPanelList.radio to show a bunch of FAQs on the screen. As the children property only accepts a List of ExpansionPanel widgets, I can't give shadow to the ExpansionPanelRadio widget. Is there any method to give it a shadow like so:

如何给 ExpansionPanelRadio 小部件添加阴影?

Here's the code:

class FaqsScreen extends StatelessWidget {
  FaqsScreen({super.key});

  final List&lt;int&gt; _faqData = List.generate(5, (index) =&gt; index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: ExpansionPanelList.radio(
              elevation: 0,
              expandedHeaderPadding: EdgeInsets.zero,
              children: _faqData
                  .map(
                    (faq) =&gt; ExpansionPanelRadio(
                      value: _faqData.indexOf(faq),
                      canTapOnHeader: true,
                      headerBuilder: (context, isExpanded) =&gt; ListTile(
                        contentPadding: EdgeInsets.zero,
                        title: Text(&#39;1. Lorem Ipsum is simply dummy text?&#39;),
                      ),
                      body: Column(
                        children: [
                          Divider(),
                          Text(
                            &#39;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\&#39;s standard dummy text ever since the 1500s.&#39;,
                          ),
                        ],
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

答案1

得分: 1

你可以使用ExpansionTile来替代ExpansionPanelRadio。

这是输出的截图:

点击这里查看截图

以下是示例代码:

 class FaqsScreen extends StatefulWidget {
  FaqsScreen({super.key});

  @override
  State<FaqsScreen> createState() => _FaqsScreenState();
}

class _FaqsScreenState extends State<FaqsScreen> {
  final List<int> _faqData = List.generate(5, (index) => index);

  int _expandedIndex = -1; // 所有的tile在开始时都是关闭的

  void _handleExpansion(int index) {
    setState(() {
      if (_expandedIndex == index) {
        _expandedIndex = -1; // 如果是同一个tile,则关闭它
      } else {
        _expandedIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              children: _faqData
                  .map(
                    (faq) => Container(
                      margin: EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black.withOpacity(0.3),
                              blurRadius: 10),
                          BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            spreadRadius: -2,
                            blurRadius: 5,
                          ),
                        ],
                      ),
                      child: ExpansionTile(
                        key: UniqueKey(),
                        onExpansionChanged: (expanded) {
                          _handleExpansion(faq);
                        },
                        initiallyExpanded: _expandedIndex == faq,
                        controller: ExpansionTileController(),
                        title: Text('1. Lorem Ipsum is simply dummy text?'),
                        children: [
                          Divider(),
                          Padding(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 12.0, vertical: 8),
                            child: Text(
                              'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}
英文:

You can use ExpansionTile instead of ExpansionPanelRadio

Here is the output

and here is the sample code :

 class FaqsScreen extends StatefulWidget {
  FaqsScreen({super.key});

  @override
  State&lt;FaqsScreen&gt; createState() =&gt; _FaqsScreenState();
}

class _FaqsScreenState extends State&lt;FaqsScreen&gt; {
  final List&lt;int&gt; _faqData = List.generate(5, (index) =&gt; index);

  int _expandedIndex = -1; // all tiles close at beginning

  void _handleExpansion(int index) {
    setState(() {
      if (_expandedIndex == index) {
        _expandedIndex = -1; // if the same tile, then close it
      } else {
        _expandedIndex = index;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16),
            child: Column(
              children: _faqData
                  .map(
                    (faq) =&gt; Container(
                      margin: EdgeInsets.all(4),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black.withOpacity(0.3),
                              blurRadius: 10),
                          BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            spreadRadius: -2,
                            blurRadius: 5,
                          ),
                        ],
                      ),
                      child: ExpansionTile(
                        key: UniqueKey(),
                        onExpansionChanged: (expanded) {
                          _handleExpansion(faq);
                        },
                        initiallyExpanded: _expandedIndex == faq,
                        controller: ExpansionTileController(),
                        title: Text(&#39;1. Lorem Ipsum is simply dummy text?&#39;),
                        children: [
                          Divider(),
                          Padding(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 12.0, vertical: 8),
                            child: Text(
                              &#39;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\&#39;s standard dummy text ever since the 1500s.&#39;,
                            ),
                          ),
                        ],
                      ),
                    ),
                  )
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

huangapple
  • 本文由 发表于 2023年8月9日 15:37:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76865568.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定