Question

我想在屏幕中央放置一个绘画板小部件，并在绘画板的右上方放置一个清除按钮。我已经尝试过使用MainAxisAlignment.center设置列，但是它在面板上居中，并清除按钮，因此面板并非绝对居中。我怎样才能达到这种效果？

Answer 1

您可以将position与stack一起使用，并放置在所需的任何位置。复制并在dartpad中尝试此代码。

▿ 7 elements
  ▿ 0 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e880f0>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : 5D05C73D-8863-47E3-B1E5-3331791A3FB8
        - type : SweatNetOffline.RecordType
        - progression : 1
        ▿ timeStamp : 2020-10-16 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 624517019.639298
  ▿ 1 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e89ec0>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : C40F5884-AABF-43C8-9921-95DD1423AC4D
        - type : SweatNetOffline.RecordType
        - progression : 1
        ▿ timeStamp : 2020-10-22 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 625035419.639274
  ▿ 2 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e88cf0>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : 5EE70ABF-4C4D-4FB5-A850-3D0081D91D0D
        - type : SweatNetOffline.RecordType
        - progression : 2
        ▿ timeStamp : 2020-10-20 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 624862619.639284
  ▿ 3 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e8a0a0>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : 59152DCA-63EC-4EBF-ACDB-B45FA5E85EED
        - type : SweatNetOffline.RecordType
        - progression : 2
        ▿ timeStamp : 2020-10-18 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 624689819.639291
  ▿ 4 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e89890>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : 0E12D3D6-0650-41A6-AC12-EB75EFA0A151
        - type : SweatNetOffline.RecordType
        - progression : 0
        ▿ timeStamp : 2020-10-26 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 625381019.638627
  ▿ 5 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e89e60>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : 99A929C4-B94B-4F8F-8C6D-2C356D778D95
        - type : SweatNetOffline.RecordType
        - progression : 2
        ▿ timeStamp : 2020-10-24 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 625208219.639251
  ▿ 6 : 2 elements
    ▿ key : <YearMonthDay: 0x600000e89f20>
    ▿ value : 1 element
      ▿ 0 : TestRecord
        - identifier : EF6EB971-504B-4587-8038-FB8C3FD7ACDC
        - type : SweatNetOffline.RecordType
        - progression : 1
        ▿ timeStamp : 2020-10-14 04:56:59 +0000
          - timeIntervalSinceReferenceDate : 624344219.639307

Answer 2

这里是带有Column小部件的类似UI，您可以在SizedBox内黄色框下方添加一个Column高度的Icon，因此黄色框似乎居中。

因此，我们可以避免在Positioned小部件内使用硬编码值（这会影响响应UI）

这是代码段。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double iconSize = 32;
    return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(
        alignment: Alignment.centerRight,
        height: iconSize,
        child: Icon(Icons.close, size: iconSize),
      ),
      Container(
        width: MediaQuery.of(context).size.width,
        height: 250,
        color: Colors.yellow,
      ),
      SizedBox(height: iconSize)
    ]);
  }
}

颤抖如何在屏幕上放置相对于其他窗口小部件的窗口小部件？

2 个答案: