如何在 Flutter 的容器内使用扩展块？

Question

这是一组扩展图块。在这里，我想在容器内扭曲 Expansion 瓦片，以便我可以为瓦片提供边框、形状和阴影。还我想要像这样的扩展结果。我怎样才能做到这一点。请帮助我

我试过下面的模式。但是当我展开时我收到渲染溢出错误

              Container(
                  height: 80,
                  width: MediaQuery.of(context).size.width - 10,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                          color: Theme.of(context).hintColor.withOpacity(0.2),
                          spreadRadius: 2,
                          blurRadius: 5)
                    ],
                  ),
                  child:
                  ExpansionTile(
                    backgroundColor: Colors.white,
                    trailing: Icon(Icons.arrow_forward_ios_rounded),
                    initiallyExpanded: false,
                    title: Text(
                        'Messages',
                        style: Theme.of(context)
                            .textTheme
                            .subtitle),

                    children: List.generate(
                        3, (indexProduct) {
                      return Text("terwyteuwte");
                    }),
                  )
              ),

请帮帮我..

Answer 1

你可以做以下事情根据您的用途在ListView()中添加以下小部件

class ItemTile extends StatefulWidget {
//   final OrderItem orderItem;

//   OrderItemTile(this.title);

  @override
  _ItemTileState createState() => _ItemTileState();
}

class _ItemTileState extends State<ItemTile> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      height: _expanded
          ? 350
          : 100,
      child: Card(
        elevation: 10,
        color: Theme.of(context).canvasColor,
        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          children: <Widget>[
            ListTile(
              title: (Text(
                'File',
                style: TextStyle(
                    fontSize: 22, fontWeight: FontWeight.bold),
              )),
              trailing: IconButton(
                  icon: _expanded
                      ? Icon(Icons.expand_less)
                      : Icon(Icons.expand_more),
                  onPressed: () {
                    setState(() {
                      _expanded = !_expanded;
                    });
                  }),
            ),
            AnimatedContainer(
              duration: Duration(milliseconds: 300),
              height: _expanded
                  ? 300
                  : 0,
              width: MediaQuery.of(context).size.width,
              child: ItemExpandedTile(),
            )
          ],
        ),
      ),
    );
  }
}

展开后显示的小部件

class ItemExpandedTile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Stack(
        children: <Widget>[
          Positioned(
            top: 5,
            child: Container(
              height: 90,
              width: MediaQuery.of(context).size.width - 75,
              padding: EdgeInsets.all(10),
              decoration: new BoxDecoration(
                color: Theme.of(context).canvasColor,
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 15.0,
                    spreadRadius: 0.5,
                    offset: Offset(
                      1.0,
                      1.0,
                    ),
                  )
                ],
              ),
              child: Row(
                children: <Widget>[
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Text(
                        'Title',
                        style: TextStyle(
                            fontSize: 12, fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结果：

如何在 Flutter 的容器内使用扩展块？

How to use expansion tile inside a container in Flutter?

dart

android-studio

flutter

flutter-layout

flutter-widget