flutter - 如何在颤动中放置一个图标跨越两个小部件？

Question

我想在两个Expanded（flex = 1 和 flex = 10）之间放置一个图标（空白方块），如下图所示。我不知道该怎么做，我可以把它放在左边展开（灰色）或右边展开，但不能放在它们之间。请问有什么想法吗？

先感谢您。

标签： flutter

Answer 1

这是您需要Stack将一个小部件放在另一个小部件上的地方

转到DARTPAD粘贴下面的代码，看看它的工作原理

用这个

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Center(
            child: Stack(alignment: Alignment.center, children: [
      Row(children: [
        Expanded(
          flex: 1,
          child: Container(height: 50.0, color: Colors.grey),
        ),
        Expanded(
          flex: 10,
          child: Container(height: 50.0, color: Colors.black),
        )
      ]),
      Row(children: [
        Expanded(
          flex: 2,
          child: Icon(Icons.stop, color: Colors.red),
        ),
        Expanded(flex: 9, child: Container()),
      ])
    ])));
  }
}