在 Flutter 中，如何創建這樣的形狀 XML 我在 android java app 中創建的形狀

Question

我在 java 中創建了一個 android 應用程序，其中包含這個 xml 形狀：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<stroke android:width="1dp" android:color="@color/DodgerBlue"/>
<solid android:color="@color/White" />

現在我正在創建一個 flutter 應用程序，所以我試圖在 flutter 中創建相同的形狀，但我沒有運氣。

有人可以指導我如何做到這一點嗎？

謝謝。

Answer 1

有像TextFiled這樣的小部件， TextFormFiled可用於獲取用戶輸入。

讓我們拆分 xml 代碼

• android:radius="20dp"它應該有 20px（flutter 使用像素）的邊框和 TextFormFiled 小部件可以根據 state 提供不同的邊框。
• padding android:left="10dp...."有 10px 填充
• stroke android:width="1dp"表示邊框粗細
• 和背景色

我們可以使用OutlineInputBorder

const border = OutlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromARGB(255, 0, 68, 255),
        width: 1,
      ),
      borderRadius: BorderRadius.all(
        Radius.circular(20),
      ),
    );

小部件將是

class TestWidget extends StatelessWidget {
  const TestWidget({super.key});

  @override
  Widget build(BuildContext context) {
    const border = OutlineInputBorder(
      borderSide: BorderSide(
        color: Color.fromARGB(255, 0, 68, 255),
        width: 1,
      ),
      borderRadius: BorderRadius.all(
        Radius.circular(20),
      ),
    );
    return TextFormField(
      enabled: false,
      decoration: InputDecoration(
        filled: true,
        fillColor: Colors.grey.shade50,
        contentPadding: EdgeInsets.all(10),
        border: border,
        enabledBorder: border,
        focusedBorder: border,
        errorBorder: border,
        disabledBorder: border,
        focusedErrorBorder: border,
      ),
    );
  }
}

有關更多信息，請訪問flutter.dev/flutter/material/TextFormField-class.html

Answer 2

添加邊框半徑和邊框寬度的最簡單方法是使用 BoxDecoration 的容器

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _simpleBorder(),
          ],
        ),
      )),
    );
  }

  Widget _simpleBorder() => Container(
        width: 200,
        height: 50,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.blue)),
      );
}

在 Flutter 中有更多使用形狀的高級方法。如果這不能解決您的問題，我可以提供有關形狀的更多信息