Flutter常用布局

Row 中包含 Container 和 GridView，GridView是自适应高度，Container高度和 GridView 高度保持一致。

listViewContainGridView() {
  var icons = const [
    Icon(Icons.ac_unit),
    Icon(Icons.airport_shuttle),
    Icon(Icons.all_inclusive),
    Icon(Icons.beach_access),
    Icon(Icons.cake),
    Icon(Icons.free_breakfast),
    Icon(Icons.free_breakfast),
    Icon(Icons.free_breakfast),
    Icon(Icons.free_breakfast),
    Icon(Icons.free_breakfast)
  ];
  return Container(
    padding: const EdgeInsets.all(15),
    child: ListView.builder(
        itemCount: 10,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Container(height: 20),
              Stack(
                children: [
                  // DecoratedBox(decoration: decoration)
                  Container(
                      margin: const EdgeInsets.only(left: 100),
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topRight: Radius.circular(10),
                          bottomRight: Radius.circular(10),
                        ),
                        border: Border.fromBorderSide(BorderSide()),
                      ),
                      child: GridView.builder(
                        itemCount:  Random(5).nextInt(9),
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        // 禁止滑动
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          childAspectRatio: 2,
                        ),
                        itemBuilder: (BuildContext context, int index) {
                          return Column(
                            children: [
                              icons[index % icons.length],
                              Text("icon - $index")
                            ],
                          );
                        },
                      )),
                  Positioned.fill(
                    right: MediaQuery.of(context).size.width - 130,
                    child: Container(
                      width: 100,
                      decoration: const BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          bottomLeft: Radius.circular(10),
                        ),
                        color: Colors.green,
                      ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text(
                          "专项债$index",
                          style: const TextStyle(
                            fontSize: 15,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          );
        }),
  );
}

Row 中子控件单独指定顶部对齐

rowSample() {
  return Container(
    height: 40,
    color: Colors.blueGrey,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          "assets/images/icon_wechat.png",
          height: 20,
          width: 20,
        ),
        const SizedBox(width: 10),
        const Text(
          "分享至微信",
          style: TextStyle(fontSize: 15, color: Colors.black),
        ),
        const SizedBox(width: 5),
        Align(
          child: Image.asset(
            "assets/images/ic_right.png",
            width: 12,
            height: 12,
          ),
          alignment: FractionalOffset(0, 0.2),
        ),
      ],
    ),
  );
}