用彩色圓角框包裹一行文本

根據下面的代碼，如何在容器中環繞一行文本？（如圖所示）。另外，如何使容器如圖所示略微圓潤？

當我將它包裝在容器中時，為什么它從左到右占據了應用程式的整個寬度，這不是我想要實作的。

先感謝您。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            child: Expanded(
              child: PageView(
                controller: _pageController,
                onPageChanged: (page) {
                  setState(() {
                    currentIndex = page;
                  });
                },
                children: [
                  SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(
                          padding: EdgeInsets.only(
                              top: 0, left: 220, right: 30, bottom: 0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              Expanded(
                                flex: 7,
                                child: Text(
                                  '187,177.33',
                                  style: GoogleFonts.openSans(
                                      color: Colors.black,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w500),
                                  textAlign: TextAlign.right,
                                ),
                              ),
                              SizedBox(width: 10),
                              Expanded(
                                flex: 4,
                                child: Text(
                                  '82',
                                  style: GoogleFonts.openSans(
                                      color: Colors.black,
                                      fontSize: 15,
                                      fontWeight: FontWeight.w500),
                                  textAlign: TextAlign.right,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

uj5u.com熱心網友回復：

decoration在容器上使用。同時減少填充，

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Container(
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(12)),
    child: Row(
   

return Scaffold(
  body: Column(
    children: [
      Container(
        child: Expanded(
          child: PageView(
            // controller: _pageController,
            onPageChanged: (page) {
              setState(() {
                // currentIndex = page;
              });
            },
            children: [
              SingleChildScrollView(
                child: Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(12)),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Expanded(
                              flex: 7,
                              child: Text(
                                '187,177.33',
                                style: GoogleFonts.openSans(
                                    color: Colors.black,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500),
                                textAlign: TextAlign.right,
                              ),
                            ),
                            SizedBox(width: 10),
                            Expanded(
                              flex: 4,
                              child: Text(
                                '82',
                                style: GoogleFonts.openSans(
                                    color: Colors.black,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w500),
                                textAlign: TextAlign.right,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);
}

更多關于

標籤：扑镖颤振布局

上一篇：在有人輸入某些內容后，我一直在嘗試輸出AlertDialog，但是alertdialog不起作用

下一篇：如何更新外部Widget內的State類的變數？