Can't set text field to fill width in QML

Question

I am following this tutorial on YouTube and the person sets the TextField to fill the width of the RowLayout. However, it doesn't seem to work for me. I tried using Layout.fillWidth on the CheckBox and it seems to work perfectly fine but it doesn't seem to want to work on the TextField. Here is my code:

main.qml:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow
{
    visible: true;
    width: 640;
    height: 480;
    title: qsTr("Tabs");

    ToDoList
    {
        anchors.centerIn: parent;
    }
}

ToDoList.qml:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Frame
{
    ListView
    {
        // Using implicit width and height allows the frame to automatically scale to the size of the list view
        implicitWidth: 250
        implicitHeight: 250
        clip: true
        model: 100
        delegate: RowLayout {
            width: parent.width

            CheckBox {}
            TextField
            {
                Layout.fillWidth: true
            }
        }
    }
}

Here is a screenshot of what mine looks like

What did I do wrong?

I don't know if this has anything to do with it but I made a "Qt Quick Application - Swipe" instead of "Qt Quick Controls 2 Application" as that option wasn't available to me. Thanks in advance for any help.

Edit: I have written step by step instructions to replicate the issue below.

1. File > New File or Project
2. From the new window make sure "Application" is selected then click "Qt Quick Application - Swipe" and press "Choose"
3. Set any name for the project and click "Next"
4. Set the build system to "qmake" and click "Next"
5. Set the minimal required Qt version to "Qt 5.9" and the Qt quick controls style to "Material Dark" and click "Next"
6. Select the "Desktop Qt 5.12.0 MSVC2017 64bit" as the kit and click "Next"

7. Set the options to have no version control and click "Finish"

8. Delete "Page1Form.ui.qml" and "Page2Form.ui.qml" from the "Projects" pane

9. Replace the contents of "main.qml" with:

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow
{
    visible: true;
    width: 640;
    height: 480;
    title: qsTr("Tabs");

    ToDoList
    {
        anchors.centerIn: parent;
    }
}

10. Right click on the root project file and click "Add New"
11. From the new window make sure "Qt" is selected then click "QML File (Qt Quick 2)" and press "Choose"
12. Name the file "ToDoList" and click "Next"
13. Add to project "qml.qrc Prefix: /" then set the options to have no version control and click "Finish"
14. Replace the contents of "ToDoList.qml" with:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Frame
{
    ListView
    {
        // Using implicit width and height allows the frame to automatically scale to the size of the list view
        implicitWidth: 250
        implicitHeight: 250
        clip: true
        model: 100
        delegate: RowLayout {
            width: parent.width

            CheckBox {}
            TextField
            {
                Layout.fillWidth: true
            }
        }
    }
}

15. Run the project

Answer 1

The width is set properly. The problem is with TextField style. You may check it by setting background like

TextField
{
    Layout.fillWidth: true
    background: Rectangle {
        color: "red"
    }
}

Or just start typing into those fields with and without Layout.fillWidth: true